微信 - 选项卡竖版

参考案例：美团App的城市列表

美团App的城市列表

---

这是我仿造的版本

image.png

---

代码wxml部分

---

<!--pages/首页_城市列表/首页_城市列表.wxml-->
<view style='height: 100rpx;background: red;'>搜索框</view>
<view class='interval_box'></view>
<view style='height: 100rpx;background: blue;'>当前定位城市： 图标 北京市</view>
<!-- 城市列表 -->
<view class='Ju_between' style='height: calc(100% - 220rpx);'>
    <view class='province_list'>
        <view class="{{cityTab==0 ? 'cityCur' : ''}}" data-current="0" bindtap="citySidebar">1推荐城市（热门）</view>
        <view class="{{cityTab==1 ? 'cityCur' : ''}}" data-current="1" bindtap="citySidebar">2北京</view>
        <view class="{{cityTab==2 ? 'cityCur' : ''}}" data-current="2" bindtap="citySidebar">3上海</view>
        <view class="{{cityTab==3 ? 'cityCur' : ''}}" data-current="3" bindtap="citySidebar">4天津</view>
        <view class="{{cityTab==4 ? 'cityCur' : ''}}" data-current="4" bindtap="citySidebar">5重庆</view>
    </view>
    <swiper class='city_list' current="{{cityTab}}" duration="0" vertical="ture">
        <swiper-item catchtouchmove="stopTouchMove">
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>aaaaaa</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
            <view>1111111</view>
        </swiper-item>
        <swiper-item catchtouchmove="stopTouchMove">
            <view>2222222</view>
        </swiper-item>
        <swiper-item catchtouchmove="stopTouchMove">
            <view>3333333</view>
        </swiper-item>
        <swiper-item catchtouchmove="stopTouchMove">
            <view>444444</view>
        </swiper-item>
        <swiper-item catchtouchmove="stopTouchMove">
            <view>5555555</view>
        </swiper-item>
    </swiper>
</view>

代码wxss部分

/* pages/首页_城市列表/首页_城市列表.wxss */

.Ju_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.province_list {
    height: 100%;
    width: 180rpx;
    background: #eee;
    overflow: scroll;
}

.city_list {
    height: 100%;
    background: #fff;
    width: 570rpx;
}

.cityCur {
    color: #23b8ff;
    font-weight: 600;
    /* 添加下划线 border-bottom: 5rpx solid #da7c0c; */
}

swiper-item {
    overflow: scroll;
}

代码js部分

// pages/首页_城市列表/首页_城市列表.js
Page({
    data: {
        // 城市列表 Tab切换 cur 下标 eq(0),这里首字母不能大写
        cityTab: 0,
    },
    //  城市列表  3月6日

    // 禁止"swiper"手动滑动
    stopTouchMove: function() {
        return false;
    },
    // 点击tab切换
    citySidebar: function(e) {

        var that = this;

        if (this.data.cityTab === e.target.dataset.current) {
            return false;
        } else {
            that.setData({
                cityTab: e.target.dataset.current
            })
        }
    }
})

---

讲解，代码在底下
重要的代码部分。我自己也不能完全理解

class="{{cityTab==0 ? 'cityCur' : ''}}" data-current="0" bindtap="citySidebar"
class="{{cityTab==1 ? 'cityCur' : ''}}" data-current="1" bindtap="citySidebar"
class="{{cityTab==2 ? 'cityCur' : ''}}" data-current="2" bindtap="citySidebar"
这里是重点
{{cityTab==0 ? 'cityCur' : '' 是被选中时的样式
data-current="0"是自定义的下标 eq(0)的感觉吧
bindtap="citySidebar"是点击事件bindtap执行citySidebar函数

---

<swiper class='city_list' current="{{cityTab}}" duration="0" vertical="ture">

<swiper>组件自带的属性名current意思是，当前所在滑块的 index
current="{{cityTab}}"也是下标，{{cityTab}}的取值，在js里面
<swiper>组件自带的属性名duration="0"意思是，滑动动画时长为0
<swiper>组件自带的属性名vertical="ture"意思是，滑动方向是否为纵向

---

<swiper-item catchtouchmove="stopTouchMove">是禁止< swiper>组件手动轮播

catchtouchmove="stopTouchMove"还要结合js里面函数，才能执行禁止

教程讲解https://www.2cto.com/kf/201804/737272.html