小程序开发框架

# 介绍

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

# 引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-scroll-list": "/miniprogram_npm/m-ui/mx-scroll-list/index",
}

# 小程序码

可使用微信扫码查看小程序码

#

# 代码演示

# 基本用法

 <mx-panel margin padding="16">
    <mx-scroll-list bind:right="right" bind:left="left">
      <view class="scroll-list">
        <view class="scroll-list__goods-item" wx:for="{{list}}" wx:for-item="Goods" key="index">
          <image class="scroll-list__goods-item__image" src="{{Goods.thumb}}"></image>
          <text class="scroll-list__goods-item__text">￥{{ Goods.price }}</text>
        </view>
        <view class="scroll-list__goods-item" wx:for="{{list}}" wx:for-item="Goods" key="index">
          <image class="scroll-list__goods-item__image" src="{{Goods.thumb}}"></image>
          <text class="scroll-list__goods-item__text">￥{{ Goods.price }}</text>
        </view>
      </view>
    </mx-scroll-list>
  </mx-panel>

data:{
 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'
    }],
    },

# 卡片滑动展示 不显示指示条

 <mx-panel margin padding="8">
    <mx-scroll-list indicator="{{false}}">
      <view class="tabbar-demo">
        <view class="tabbar-demo-for" wx:for="{{list2}}" wx:key="{{index}}">
          <mx-tabbar-item
            data-index="{{index}}"
            data-item="{{item}}"
            checked="{{ item.checked }}"
            icon="{{item.icon}}"
            activeIcon="{{item.activeIcon}}"
            bind:change="onChangeFor"
            >开关</mx-tabbar-item
          ></view
        ></view
      >
    </mx-scroll-list>
  </mx-panel>

data: {
  list2: [
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon1.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon2.png',
      },
      {
        checked: false,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon3.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon4.png',
      },
      {
        checked: false,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon5.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon6.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon7.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon8.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon9.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon10.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon11.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon12.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon13.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon14.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon15.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon16.png',
      },
    ],
    },

    onChangeFor(e) {
    const { index, item } = e.currentTarget.dataset
    let itemChecked = 'list2[' + index + '].checked'
    this.setData({
      [itemChecked]: e.detail,
    })
    console.log(e)
  },

# 多菜单扩展

   <mx-panel margin padding="8">
    <mx-scroll-list indicator="{{false}}">
      <view class="tabbar-demo-two">
        <view
          class="tabbar-demo-two-for {{index==0?'demo-margin-bottom' : '' }}"
          wx:for="{{menuArr}}"
          wx:key="{{index}}"
        >
          <view
            class="tabbar-demo-for-two"
            wx:for="{{item}}"
            wx:for-index="index1"
            wx:for-item="item1"
            wx:key="{{index1}}"
          >
            <mx-tabbar-item
              data-index="{{index}}"
              data-index1="{{index1}}"
              data-item="{{item1}}"
              checked="{{ item1.checked }}"
              icon="{{item1.icon}}"
              activeIcon="{{item1.activeIcon}}"
              bind:change="onChangeForTwo"
              >开关</mx-tabbar-item
            >
          </view></view
        ></view
      >
    </mx-scroll-list>
  </mx-panel>

 data:{
  menuArr: [
      [{
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon1.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon2.png',
      },
      {
        checked: false,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon3.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon4.png',
      },
      {
        checked: false,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon5.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon6.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon7.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon8.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon9.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon10.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon11.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon12.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon13.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon14.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon15.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon16.png',
      },
      ],
      [{
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon1.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon2.png',
      },
      {
        checked: false,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon3.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon4.png',
      },
      {
        checked: false,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon5.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon6.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon7.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon8.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon9.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon10.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon11.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon12.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon13.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon14.png',
      },
      {
        checked: true,
        activeIcon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon15.png',
        icon: baseImgApi.MuiUrl + '/assets/image/example/icon/icon16.png',
      },
      ]
    ]
 }

   onChangeForTwo(e) {
    console.log(e.currentTarget.dataset)
    const { index,index1, item } = e.currentTarget.dataset
    let itemChecked = 'menuArr[' + index + '][' + index1 + '].checked'
    this.setData({
      [itemChecked]: e.detail,
    })
    console.log(e)
  },

# API

# Props

参数 说明 类型 默认值
indicatorWidth 指示器的整体宽度 string 50
indicatorBarWidth 滑块的整体宽度 string 20
indicator 是否显示面板指示器 boolean true
indicatorColor 指示器非激活颜色 string #f2f2f2
indicatorActiveColor 指示器滑块颜色 string #267AFF

# Slot

名称 说明
- 默认插槽，用于在组件嵌入内容

# 外部样式类

名称 说明
custom-class 根节点样式类
custom-indicator-class 指示器样式类

# Events

事件名 说明 参数
bind:left 滑动到左边时触发 -
bind:right 滑动到右边时触发 -

← 粘性布局（sticky） →