微信小程序横向滚动条自定义组件

1. 效果

2. 组件代码

scroll-tab.wxml

<!--/component/scroll-tab/scroll-tab.wxml-->
<view class="contain-bar">
  <scroll-view scroll-x scroll-into-view="{{itemid}}" scroll-with-animation='true'  class="scroll-tab" id='scrollTab' >
    <view class="scroll-list" animation="{{animation}}">
        <view class="scroll-item" wx:for="{{data}}" wx:key="index"  
        bindtap="translate"  id="item{{index}}"
        data-index="{{index}}"
        data-key="{{item.key}}"
        data-msg="{{item}}">
          <text style="color:{{activeKey==item.key?activeColor:textColor}}; border-bottom:{{activeKey==item.key?'4rpx solid #ed4861':none}};font-size:26rpx;padding:6rpx 0;">{{item.vulue}}</text>   
        </view>
    </view>
  </scroll-view>
</view>

scroll-tab.js

//component/scroll-tab/scroll-tab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    data: { //要渲染的列表
      type: Array,
      value: [],
    },
    activeKey: { //选中的key
      type: Number,
      value: '',
    },
    activeColor: { //选中的颜色
      type: String,
      value: '#ed4861'
    },
    textColor: {
      type: String,
      value: '#666'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    tableft:0,
    itemid:null
  },

  lifetimes: {
    attached: function () {
      this.animation = wx.createAnimation()
      this.tabLeftPostion=0
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    translate (e) {
      let index = e.currentTarget.dataset.index;
      this.setData({
        activeKey:e.currentTarget.dataset.key,
        itemid:'item'+(index-2)
      }) 
      var myEventDetail = {data:e.currentTarget.dataset.msg} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    },
  }

})

scroll-tab.wxss

/* moduleIndependent/component/scroll-tab/scroll-tab.wxss */
.contain-bar{
  height: 98rpx;
  width: 100%;
  overflow-y: hidden;
}
.scroll-tab{
  width: 100%;
  height: 110rpx;
  line-height: 98rpx;
  overflow-y: hidden;
  overflow-x: scroll;
  z-index: 99;  
  position: relative;
}
.scroll-list{
  word-wrap: normal;
  white-space: nowrap;
  width: 100%;
  background: #fff;
  display: inline-block;
  position: absolute;
}
.scroll-item{
   padding:0 20rpx;
   position: relative;
   display: inline-block;
   color: #666;
}

scroll-tab.json

{
  "component": true,
  "usingComponents": {}
}

3. 使用

在要使用的页面引入组件

在wsml中使用组件。

data(tabList)为对象数组，对象中有2个属性key和value,展示的是value，key用于控制选中激活，activeKey为当前选中，bindmyevent为滚动选中事件。

  //滚动选中事件
  seleteClass(e) {
    this.setData({
      // 清空页面展示数组，下次查询第一页
      pageNum: 1,
      informationList: [],
      classCode: e.detail.data.key, // 选中值
      isLoad: false, //是否加载完成
      isShowLoad: true, //是否显示底部加载条
    })
    // 刷新页面展示
    this.getInformationList();
  }