小程序采坑记(二) scroll-view
项目当时有个需求是,顶部的导航栏,有三个是固定的,top,全部,我的,但是他们的位置也是固定的,就是这样。
当用户在详情页有点击关注时,关注的内容要在这个导航栏显示,而且显示的位置必须是在全部和我的中间,按顺序排列,然后导航栏可以左右滑动。。。
然后这里就用到了小程序的组件scroll-view
由于我这个是横向滚动,所以设置属性scroll-x=true
下面我们看看代码
<view>
<scroll-view scroll-x="true" class="weui-navbar">
<block wx:for-items="{{tabs}}" wx:key='key'>
<view data-type="{{item.attentionType}}" data-label='{{item.attentionLabel}}' id='{{index}}' class="{{activeIndex == index ?'item_on':''}} default-item" bindtap="tabClick" style="width:{{tabW}}px">
{{item.attentionLabel}}
</view>
</block>
</scroll-view>
</view>
有一个问题就是,这里的每个导航有多宽。
首先,我们通过小程序提过的公共接口wx.getSystemInfo()
解释一下对应的参数
'brand':手机品牌
“model”:‘手机型号’
“pixelRatio”:设备像素比
“screenWidth”:屏幕宽度
“screenHeight”:屏幕高度
“windowWidth”:可使用窗口宽度
“windowHeight”:可使用窗口version高度
“version”:微信版本号
“system”:操作系统版本
“fontSizeSetting”:用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准,单位 SDKVersionpx。
“SDKVersion”:客户端基础库版本
我们根据返回的可使用窗口宽度设置每个导航标签高度。
// 获取系统参数,设置tab的宽度
wx.getSystemInfo({
success: function (res) {
console.log(res)
mtabW = res.windowWidth / 3; //设置tab的宽度
that.setData({
tabW: mtabW
})
}
});
因为首先我们默认只有三个,所以利用返回的宽度除以3.
当用户点击关注标签之后,就可以左右滚动了。