uView ScrollList 横向滚动列表

简介: uView ScrollList 横向滚动列表

该组件一般用于同时展示多个商品、分类的场景,也可以完成左右滑动的列表。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

通过slot传入内容

<template>
    <u-scroll-list>
        <view v-for="(item, index) in list" :key="index">
            <image :src="item.thumb"></image>
        </view>
    </u-scroll-list>
</template>
<script>
    export default {
        data() {
            return {
                list: [{
                    thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
                }]
            }
        }
    }
</script>

copy

#指示器的使用

  • indicator 用于控制指示器是否显示
  • indicatorWidth 用于控制指示器整体的宽度
  • indicatorBarWidth 用于控制指示器滑块的宽度
  • indicatorColor 指示器的颜色
  • indicatorActiveColor 滑块的颜色
  • indicatorStyle 指示器的位置/样式控制
<template>
    <u-scroll-list :indicator="indicator" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
        <view v-for="(item, index) in list" :key="index">
            <image :src="item.thumb"></image>
        </view>
    </u-scroll-list>
</template>
<script>
    export default {
        data() {
            return {
                indicator: true,
                list: [{
                    thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
                }, {
                    thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
                }]
            }
        }
    }
</script>

copy

#兼容性与性能

  • 此组件是在nvue中引入bindingx,此库类似于微信小程序wxs,目的是让js运行在视图层,减少视图层和逻辑层的通信折损,在nvue中会有更好的体验。
  • 此组件是在APP-VUE、H5、小程序中使用的是wxs。
  • 其他平台则使用js完成。

当滑动到最左边/最右边时,uView提供了事件leftright可供调用,用于对列表滑动到端点处的业务实现。

<template>
    <u-scroll-list @right="right" @left="left">
        <view class="scroll-list" style="flex-direction: row;">
            <view
                    class="scroll-list__goods-item"
                    v-for="(item, index) in list"
                    :key="index"
                    :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
            >
                <image class="scroll-list__goods-item__image" :src="item.thumb"></image>
                <text class="scroll-list__goods-item__text">¥{{ item.price }}</text>
            </view>
            <view class="scroll-list__show-more">
                <text class="scroll-list__show-more__text">查看更多</text>
                <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
            </view>
        </view>
    </u-scroll-list>
</template>
<script>
export default {
  data() {
    return {
      list: [{
        price: '230.5',
                thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
      }, {
        price: '74.1',
                thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
      }, {
        price: '8457',
                thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
      }, {
        price: '1442',
                thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
      }, {
        price: '541',
                thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
      }, {
        price: '234',
                thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
      }, {
        price: '562',
                thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
      }, {
        price: '251.5',
                thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
      }]
    }
  },
  methods: {
    left() {
      console.log('left');
    },
    right() {
      console.log('right');
    }
  }
}
</script>
<style lang="scss">
.scroll-list {
  @include flex(column);
  &__goods-item {
    margin-right: 20px;
    &__image {
      width: 60px;
      height: 60px;
      border-radius: 4px;
    }
    &__text {
      color: #f56c6c;
      text-align: center;
      font-size: 12px;
      margin-top: 5px;
    }
  }
  &__show-more {
    background-color: #fff0f0;
    border-radius: 3px;
    padding: 3px 6px;
    @include flex(column);
    align-items: center;
    &__text {
      font-size: 12px;
      width: 12px;
      color: #f56c6c;
      line-height: 16px;
    }
  }
}
</style>
相关文章
|
小程序 API 索引
uniapp中uview组件库中丰富的Picker 选择器用法
uniapp中uview组件库中丰富的Picker 选择器用法
1883 0
|
JavaScript API 开发者
使用 u-navbar 组件实现页面导航和布局的完全指南
使用 u-navbar 组件实现页面导航和布局的完全指南
1941 0
|
移动开发 小程序
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification
Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification
2885 0
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
5604 0
Element el-date-picker 日期选择器详解
|
11月前
|
JavaScript 安全
Vue3 父组件调用子组件方法($refs 在setup()、<script setup> 中使用)
Vue3 父组件调用子组件方法($refs 在setup()、<script setup> 中使用)
1746 0
|
9月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
1233 3
|
11月前
|
存储 小程序 Java
【小程序分包】小程序包大于2M,来这教你分包啊
本文介绍了如何通过分包解决uniapp小程序包体积过大的问题。由于版本升级导致包体积超过2M,即使压缩静态资源也无法满足发布要求。文章详细讲解了分包的原因、步骤及注意事项,并提供了实操示例,帮助读者理解并实现小程序分包,从而减小主包大小
499 1
【小程序分包】小程序包大于2M,来这教你分包啊
|
开发框架 JavaScript 小程序
uni-app——如何阻止事件冒泡
uni-app——如何阻止事件冒泡