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

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

具体代码参考如下：

.wxml代码如下：

<view class="title">特惠流量月包</view>
        <view class="scroll-box">
            <scroll-view class="coupon-scroll-view_x" scroll-x="true" scroll-with-animation="true" bindscrolltoupper="toUpper" bindscrolltolower="toLower"  id="scroll-view" scroll-left="{{ scrollLeft }}">
                <view class="flow-items {{ item.isSelected ? 'flow-items-selected':'' }}" wx:for="{{ couponData }}" wx:key="{{ item.id}}" bindtap="onCouponItemClick" id="item-{{ item.id }}" data-item="{{ item }}">
                    <block wx:if="{{ item.id == '1' }}">
                        <view class="flow-item">
                            <view class="item-title {{ item.isSelected ? 'selected-color':'' }}">{{ item.itemTitle }}</view>
                            <view class="first-item-text {{ item.isSelected ? 'selected-color':'' }}">为你推荐</view>
                            <view class="item-price {{ item.isSelected ? 'selected-color':'' }}">{{ item.itemPrice}}</view>
                        </view>
                    </block>
                    <block wx:else>
                        <view class="flow-item">
                            <view class="item-title {{ item.isSelected ? 'selected-color':'' }}">{{ item.itemTitle }}</view>
                            <view class="item-price {{ item.isSelected ? 'selected-color':'' }}">{{ item.itemPrice}}</view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        </view>

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
    })
  },

各位看官觉得有用吗？有用就给个赞呗！

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

猜你喜欢