小程序之利用swiper做tab切换

不知道怎么弄一个这样的gif图片，所以从网上盗了一张
项目需求就是要实现一个这样的效果

首先分析一下实现这样的效果都需要哪些部分
1、可以滑动的标签[ ‘健康’,’情感’,’职场’,’育儿’,’纠纷’….]，这里用小程序提供的组件scroll-view
2、可以滑动的内容模块，用小程序的组件swiper
3、关联这两个模块

<view class="section_nav">
    <scroll-view class="scroll-view_H" scroll-x style="width:100%">
        <view wx:for="{{tabList}}" wx:key="{{index}}" bindtap="switchTab" data-current="{{index}}" class="scroll-view-item {{currentTab==index ? 'on' : ''}}">{{item}}</view>
    </scroll-view>
</view>
<swiper class="tab-swiper" current="{{currentTab}}" bindchange="switchSwiper">
    <swiper-item wx:for="{{tabList}}" wx:key="{{index}}">
        <view class='section_positions' wx:if="{{dataSource[index].length > 0}}" height="{{auto}}">
            <view  class='position_list' wx:for="{{dataSource[index]}}" wx:for-item='itemPosition' wx:key="{{idxPosition}}" id="{{itemPosition.id}}" catchtap="onTap">
                <text class='title'>{{itemPosition.title}}</text>
            </view>
        </view>
    </swiper-item>
</swiper>

Page({
    data: {
        tabList: ['健康', '情感', '职场', '育儿', '纠纷'.....],
        currentTab: '0',
        dataSource: [],// 存储每一个tab下的数据 可以这样存dataSource: [[],[],[],[],[],[],....]
        windowHeight: 0,
        windowWidth: 0,
        tabBoxHeight:250//  每一个position_list的高度（这里的作用，后面会提到）
    },
    //事件处理函数
    bindViewTap: function () {
        wx.navigateTo({
            url: '../logs/logs'
        })
    },
    switchTab: function (e) {
        var _th = this
        var tab = e.currentTarget.dataset.current
        if (this.data.currentTab === tab) {
            return false
        } else {
            this.setData({
                currentTab: tab
            })
        }
    },
    switchSwiper: function(e){
        var _th = this
        var tab = e.detail.current
        this.setData({
            currentTab: tab
        }, () => {
            let URL = ''
            let data = {}
            if (tab === 0) {
                console.log('0')
            } else if (tab === 1) {
                console.log('1')
            } else {
                console.log('3456789')  
            }
        })
    },
    isNull: function (val) {
        let result = false
        if (val === null || val === undefined || val === '') {
            result = true
        }
        return result
    }
})

以上就实现了tab切换，但是还有一个大bug，就是当每一个tab下的数据有很多条时

dataSource: [Array(10),Array(20),Array(10),Array(15),Array(1),Array(8),....]

再来看下swiper的样式结构及造成的页面效果

swiper的默认高度是150
swiper-item是绝对定位元素不在正常的文档流里
子元素swiper-item的高是相对与swiper的100%，这样的话swiper-item里面的内容过多的时候就会被隐藏
没办法让内容撑开swiper，我们必须给一个固定死的高度，如果随便给一个高度或者使用默认高度就会向上面的效果图一样，多出的数据还是被隐藏掉。。

这时 聪明的我想到了一个好的解决办法。。。
让内容的高度和固定死的高度一至 并且可以随着内容的高度随时改变固定死的高度
但是小程序里没有DOM操作的方法，所以获取不到相应的DOM节点的高度

position_list是放置一条数据的标签，我们可以给它一个固定的高度（这里必须要有这个限定条件），就是我们之前在data里设置的tabBoxHeight：250
然后给swiper设置一个行内样式的高style=”height:{{filter.getHeight(tabBoxHeight, dataSource[currentTab].length)}}rpx”
tabBoxHeight是每一个数据的高度
dataSource[currentTab].length当前标签下的数据个数
它们相乘就是swiper的高度啦。。。。

具体代码如下

<wxs module="filter">
    var getHeight = function (tabBoxHeight, length){
        var height = 400
        if (length > 0){
            height = tabBoxHeight * length
        }
        return height
    }
    module.exports = {
        getHeight: getHeight
    }
</wxs>

<swiper style="height:{{filter.getHeight(tabBoxHeight, dataSource[currentTab].length)}}rpx" class="tab-swiper" current="{{currentTab}}" bindchange="switchSwiper">
    <swiper-item wx:for="{{tabList}}" wx:key="{{index}}">
        <view class='section_positions' wx:if="{{dataSource[index].length > 0}}" height="{{auto}}">
            <view  class='position_list' wx:for="{{dataSource[index]}}" wx:for-item='itemPosition' wx:key="{{idxPosition}}" id="{{itemPosition.id}}" catchtap="onTap">
                <text class='title'>{{itemPosition.title}}</text>
            </view>
        </view>
    </swiper-item>
</swiper>

—–END