小程序的scroll-view组件的点击自动滑动效果（类似于微信流量充值中滑块的效果）

废话不多说，直接上图吧！我的目的是想要达到鼠标点击每项时，滑块会自动滑动，具体可打开微信流量充值体验体验。但是小程序scroll-view组件并不能达到这个效果，必须手动拖动，才能滑动，网上找了许久没有找到相关的代码片段，最终发现zanUI有这个组件，参照这个组件的tab组件来完成的。zanUIGitHub地址，至于zanUI的使用，请看我【zanUI的使用】一文。

 

具体代码参考如下：

.wxml代码如下：

特惠流量月包
        
            
                
                    
                        
                            {{ item.itemTitle }}
                            为你推荐
                            {{ item.itemPrice}}
                        
                    
                    
                        
                            {{ item.itemTitle }}
                            {{ item.itemPrice}}
                        
                    
                
            
        

 

wxss文件如下：

.scroll-box .coupon-scroll-view_x{
    width: 100%;
    height: 140rpx;
    margin-top: 20rpx;
    white-space: nowrap;
    overflow: hidden;
    box-sizing:border-box;
}
.flow-items{
    width: 166rpx;
    height: 128rpx;
    border-bottom: 8rpx solid #F7F7F7;
    box-sizing:border-box;
    display: inline-block;
    /*text-align: center;*/
    position:relative;
}
.flow-item{
    width: 110rpx;
    height: 102rpx;
    position: absolute;
    /*border: #0C0C0C 1rpx solid;*/
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}


.flow-items::after {
  content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border-right:0 solid #E2E2E2;border-width:1px;
    
}

.flow-items-selected{
    border-bottom: 8rpx solid #2DAF73;
    box-sizing:border-box;
    color: #2DAF73;
}

/**
去除横向滚动条
*/
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.item-title{
    font-size: 44rpx;
    height:48rpx;
    line-height:48rpx;
    color: #0a0a0a;
}

.first-item-text{
    font-size: 18rpx;
    height:24rpx;
    line-height:24rpx;
    color: red;
}

.item-price{
    font-size: 30rpx;
    height:32rpx;
    line-height:32rpx;
    color: #6C6C6C;
}
.selected-color{
    color: #2DAF73;
}

js代码如下：

 /**
   * 页面的初始数据
   */
  data: {
      phoneData:{phone:"", phoneIsp:""},
      couponData:[{id:"1",itemTitle:"1G",itemPrice:"15.00元",isSelected:true},{id:"2",itemTitle:"2G",itemPrice:"26.00元",isSelected:false},
          {id:"3",itemTitle:"3G",itemPrice:"29.00元",isSelected:false},{id:"4",itemTitle:"4G",itemPrice:"35.00元",isSelected:false},{id:"5",itemTitle:"200M",itemPrice:"10.00元",isSelected:false},
          {id:"6",itemTitle:"500M",itemPrice:"18.00元",isSelected:false}],
      scrollLeft:0
  },

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onLoad:",options)
      let phone = "phoneData.phone";//获取上个页面的电话号码
      let phoneIsp = "phoneData.phoneIsp";//获取上个页面的归属地
      if (options.phone){
          this.setData({
              [phone]:options.phone,
              [phoneIsp]:options.phoneIsp
          })
      }

  },

/**
  * 动态改变scroll-left的值
  * */
  _handleScroll(selectedId){
        var _this = this;
        var query = wx.createSelectorQuery();//创建节点查询器
        query.select('#item-' + selectedId).boundingClientRect();//选择id='#item-' + selectedId的节点，获取节点位置信息的查询请求
        query.select('#scroll-view').boundingClientRect();//获取滑块的位置信息
        //获取滚动位置
        query.select('#scroll-view').scrollOffset();//获取页面滑动位置的查询请求
        query.exec(function (res) {
            // console.log("res:",res)
            _this.setData({
                scrollLeft: res[2].scrollLeft + res[0].left + res[0].width / 2 - res[1].width / 2
            });
        });
   },

onCouponItemClick:function (e) {
      console.log("onCouponItemClick:",e)
      var id = e.currentTarget.dataset.item.id;
      var curIndex = 0;
      for(var i = 0;i < this.data.couponData.length ;i++){
          if( id == this.data.couponData[i].id){
            this.data.couponData[i].isSelected = true;
            curIndex = i;
          } else {
            this.data.couponData[i].isSelected = false;
          }
      }
      this._handleScroll(id);
    this.setData({
        couponData:this.data.couponData
    })
  },

【数字生态，钜惠来袭】云服务器限时秒杀，首购1核1G 99元/年
https://cloud.tencent.com/redirect.php?redirect=1042&cps_key=8ee0f9c89dfe0958071ea9b77e110670&from=console

淘宝优惠券： http://tq.xinrtd.com
京东优惠券： http://jp.xinrtd.com