关键词：

• scroll-view
• scroll-x="{

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

wxml:

          
       
        西院区
           
       
        东院区
           
       
        北院区
           
       
        南院区
       
      

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值。