小程序采坑记（二） 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.

当用户点击关注标签之后，就可以左右滚动了。

小程序采坑记（二） scroll-view

猜你喜欢