ScrollX 横向滚动列表 1.0.11

手机扫码预览

15:57



---

组件名：rice-scroll-x

左右滑动的列表。1.0.11 版本开始支持
右侧模拟器无法滑动，请使用真机进行预览。

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

Template

<rice-scroll-x>
  <view v-for="item in list" :key="item.text" class="scroll-item">
    <image :src="item.image" class="image" />
    <text class="text">{{item.text}}</text>
  </view>
</rice-scroll-x>

Script

  type List = {
    text : string,
    image : string,
  }
  const list = ref<List[]>([{
    text: "充值中心",
    image: "/static/images/czzx.png"
  }, {
    text: "金币家园",
    image: "/static/images/jb.png"
  }, {
    text: "热门推荐",
    image: "/static/images/hot.png"
  }, {
    text: "超市购物",
    image: "/static/images/shop.png"
  }, {
    text: "优惠活动",
    image: "/static/images/yhq.png"
  }, {
    text: "外卖配送",
    image: "/static/images/wm.png"
  }, {
    text: "充值中心",
    image: "/static/images/czzx.png"
  }, {
    text: "金币家园",
    image: "/static/images/jb.png"
  }, {
    text: "优惠活动",
    image: "/static/images/yhq.png"
  }, {
    text: "外卖配送",
    image: "/static/images/wm.png"
  }, {
    text: "超市购物",
    image: "/static/images/shop.png"
  }])

Style

.scroll-item {
  align-items: center;
  height: 60px;
  width: 76px;
}

.image {
  height: 32px;
  width: 32px;
}

.text {
  color: var(--demo-text-color-2);
  font-size: 12px;
  margin-top: 6px;
}

自定义样式

• indicator-color 设置指示器的背景颜色
• indicator-active-color 设置滑块的背景颜色
• indicator-width 设置指示器的宽度
• indicator-bar-width 设置滑块的宽度
• indicator-height 设置指示器的高度

<rice-scroll-x  indicator-color="rgba(213, 93, 93,.2)" indicator-active-color="#e66464" indicator-width="60px"
  indicator-bar-width="25px">
  <view v-for="item in list" :key="item.text" class="scroll-item">
    <image :src="item.image" class="image" />
    <text class="text">{{item.text}}</text>
  </view>
</rice-scroll-x>

多行菜单

Template

<rice-scroll-x>
  <view class="scroll-more">
    <view v-for="(menu,index) in list2" :key="index" class="scroll-more__menu">
      <view v-for="item in menu" :key="index" class="scroll-item">
        <image :src="item.image" class="image" />
        <text class="text">{{item.text}}</text>
      </view>
    </view>
  </view>
</rice-scroll-x>

Script

type List = {
  text : string,
  image : string,
}
const list2 = ref<List[][]>([
  [{
    text: "充值中心",
    image: "/static/images/czzx.png"
  }, {
    text: "外卖配送",
    image: "/static/images/wm.png"
  }, {
    text: "金币家园",
    image: "/static/images/jb.png"
  }, {
    text: "热门推荐",
    image: "/static/images/hot.png"
  }, {
    text: "优惠活动",
    image: "/static/images/yhq.png"
  }, {
    text: "金币家园",
    image: "/static/images/jb.png"
  }, {
    text: "超市购物",
    image: "/static/images/shop.png"
  }, {
    text: "充值中心",
    image: "/static/images/czzx.png"
  }, {
    text: "优惠活动",
    image: "/static/images/yhq.png"
  }, {
    text: "外卖配送",
    image: "/static/images/wm.png"
  }],
  [{
    text: "热门推荐",
    image: "/static/images/hot.png"
  }, {
    text: "超市购物",
    image: "/static/images/shop.png"
  }, {
    text: "优惠活动",
    image: "/static/images/yhq.png"
  }, {
    text: "外卖配送",
    image: "/static/images/wm.png"
  }, {
    text: "充值中心",
    image: "/static/images/czzx.png"
  }, {
    text: "金币家园",
    image: "/static/images/jb.png"
  }, {
    text: "优惠活动",
    image: "/static/images/yhq.png"
  }, {
    text: "外卖配送",
    image: "/static/images/wm.png"
  }, {
    text: "充值中心",
    image: "/static/images/czzx.png"
  }, {
    text: "金币家园",
    image: "/static/images/jb.png"
  }]
])

Style

.scroll-item {
  align-items: center;
  height: 60px;
  width: 76px;
}

.scroll-more {
  &__menu {
    margin-top: 16px;
    flex-direction: row;
  }
}

.image {
  height: 32px;
  width: 32px;
}

.text {
  color: var(--demo-text-color-2);
  font-size: 12px;
  margin-top: 6px;
}

API

Props

属性名	类型	说明	默认值
show-indicator	Boolean	是否显示指示器	true
indicator-width	String|Number	指示器的宽度	50px
indicator-height	String|Number	指示器的高度	4px
indicator-bar-width	String|Number	滑块的宽度	20px
indicator-color	String	指示器的背景颜色	-
indicator-active-color	String	滑块的背景颜色	-
indicator-style	Object	自定义指示器的style	-
custom-style	Object	自定义style	-

Events

事件名	说明	回调参数
scrollToLeft	滚到到最左边时触发的事件	-
scrollToRight	滚到到最右边时触发的事件	-

类型定义

组件导出如下类型

// 组件类型
const scrollXRef=ref<RiceScrollXComponentPublicInstance|null>(null)