小程序 scroll-view视图的应用

最近接手的小程序，给自己做的笔记，效果如下图。

具体代码 如下：

wxml

    <scroll-view wx:if="{{flag=='0'}}" scroll-into-view='{{indexFlag}}'  scroll-x='true' class="father {{slotshow?'tap_fix':''}}"  scroll-left='{{dataX}}'  scroll-with-animation='true' bindtap='swiperNav'>
            <block wx:for="{{itemList}}" wx:key="{{index}}">
              <view class="son {{flagActive==index?'active':''}}" id="position{{index}}"  data-index="{{index}}">{{item.name}}</view>
            </block>
     </scroll-view>

js

data：{
     	dataX:'',	
		flagActive:'0',
		indexFlag:'',
	}
	swiperNav(e) {
		if (wx.pageScrollTo) {
			wx.pageScrollTo({
			  scrollTop: 0
			})
		  } 
		this.setData({
			indexFlag:e.target.id
		})
		　/*获取可视窗口宽度*/
		　var w=wx.getSystemInfoSync().windowWidth;
		　var leng=this.data.itemList.length;
		　var i = e.target.dataset.index;
		　 if(i > 3) {
			var disX = (i + 2) * w / leng;
		}else {
			var disX = (i - 1) * w / leng;
		}
		　if(i!=this.data.flagActive){
			　this.setData({
				flagActive: i
			})
		　}
		　this.setData({
		　　'dataX':disX
		　})
	},

wxss

.content {
width: 750rpx;
overflow: hidden;
text-align: center;
}
.father {
width: 750rpx;
padding:0 30rpx 0 30rpx; 
border-top:2px solid #e5e5e5;
border-bottom: 2px solid #e5e5e5;
overflow:hidden;
white-space:nowrap;
}
.son{
height: 92rpx;
padding: 0 30rpx;
line-height: 92rpx;
font-size: 28rpx;
display:inline-block;
color: #666;
}
.active {
color: black;  
font-weight: 700;
border-bottom: 3px solid #000;
}
.tap_fix {
 position: fixed;
 background-color: #fff;
 z-index: 1111;
}