微信小程序可移动视图

攻城狮方叔

已于 2022-10-10 11:58:36 修改

阅读量140

点赞数

文章标签：微信小程序 javascript 前端

于 2022-10-10 11:56:20 首次发布

本文链接：https://blog.csdn.net/qq_29820687/article/details/127242016

版权

一、效果图

在这里插入图片描述

二、代码

wxml页面：

<view id="content">
    <!-- 1. 可移动视图 -->
    <view class="list">
        <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">
            介绍
        </view>
        <view class="icon">|</view>
        <view class="{{currentTab==1?'select':'default'}}" data-current="1" bindtap="switchNav">
            图片
        </view>
        <view class="icon">|</view>
        <view class="{{currentTab==2?'select':'default'}}" data-current="2" bindtap="switchNav">
            短评
        </view>
        <view class="icon">|</view>
        <view class="{{currentTab==3?'select':'default'}}" data-current="3" bindtap="switchNav">
            影评
        </view>
    </view>
    <!-- 2. 子页面 暂时不用style="height: {{winHeight}}px;"-->
    <swiper current="{{currentTab}}" style="height: 920px;">
        <!-- 2.1 介绍 -->
        <swiper-item>
            <view>张三</view>
        </swiper-item>

        <!-- 2.2 图片 -->
        <swiper-item>
            <view>王五</view>
        </swiper-item>

        <!-- 2.3 短评 -->
        <swiper-item>
            <view>李四</view>
        </swiper-item>

        <!-- 2.4 影评 -->
        <swiper-item>
            <view>赵六</view>
        </swiper-item>
    </swiper>

</view>

wxss页面:

.list {
    display: flex;
    width: 100%;
    background-color: #201D1D;
    color: white;
}

.select {
    font-size: 12px;
    color: red;
    width: 25%;
    text-align: center;
    height: 37px;
    line-height: 37px;
    border-bottom: 5px solid #777777;
}

.default {
    font-size: 12px;
    height: 37px;
    line-height: 37px;
    margin: 0 auto;
}

.icon {
    margin-top: 10px;
}

js页面:

Page({
    data: {
        currentTab: 0,
    },
    // 事件处理函数
    switchNav: function (e) { //可移动视图组件的方法
        // console.log(e)
        if (this.data.currentTab == e.target.dataset.current) {
            return false;
        } else {
            this.setData({
                currentTab: e.target.dataset.current
            })
        }
    },
})