小程序横向滚动

关键词：

• scroll-view
• scroll-x="{{true}}"
• scroll-left
• white-space: nowrap;
• display: inline-block;

wxml:

<scroll-view scroll-x class='yqxz' style=" 100%" scroll-left="{{left}}" scroll-with-animation>
    <view class="tab {{oIndex==0?'focus':' '}}" data-index='0' bindtap="switchTab">西院区</view>
    <view class="tab {{oIndex==1?'focus':' '}}" data-index='1' bindtap="switchTab">东院区</view>
    <view class="tab {{oIndex==2?'focus':' '}}" data-index='2' bindtap="switchTab">北院区</view>
    <view class="tab {{oIndex==3?'focus':' '}}" data-index='3' bindtap="switchTab">南院区</view>
</scroll-view>

wxss:

.yqxz {
    overflow-x: auto;
    height: 90rpx;
    white-space: nowrap;
     font-family: Monaco; font-size: 9pt;">#fff;
}
.tab {
    display: inline-block;
    height: 86rpx;
    line-height: 86rpx;
    border-bottom: 4rpx solid transparent;
    padding: 0 64rpx;
}
.tab.focus {
    border-bottom-color: #16cc80;
}

 

wxjs:

data: {
    oIndex: 0,
    left: 0,
}
switchTab: function (e) {
    var oIndex= e.currentTarget.dataset.index;
    var oLeft = e.currentTarget.offsetLeft;
    if(oLeft == 327) {
        this.setData({
            left: 327,
        })
    } else if(oLeft == 0) {
        this.setData({
            left: 0,
        })
    }
    this.setData({
        oIndex: oIndex
    })
},

上面只是关键的部分，其实现主要是通过scroll-left事件改变根据判断改变left值。