微信小程序滑动列表组件＜swiper＞与＜swiper-item＞

Tom_yangyang

已于 2024-07-10 14:35:16 修改

阅读量906

点赞数 27

文章标签：微信小程序小程序

于 2024-07-09 22:53:52 首次发布

本文链接：https://blog.csdn.net/Tom_yangyang/article/details/140304688

版权

1.2 步骤二左右滑动底部滑块使顶部导航卡切换

1.0 案例整体效果流程图

1.1 步骤一点击导航卡切换下部滑块

1.1.1wxml文件代码

<!-- wxml文件代码 -->
<!-- 头部选项卡 -->
<view class="tabbox">
	<view class="tabitem {{number==0 ?'click':''}}" bind:tap="ifclick" data-number="0">最新资讯</view>
	<view class="tabitem {{number==1 ?'click':''}}" bind:tap="ifclick" data-number="1">行业新闻</view>
	<view class="tabitem {{number==2 ?'click':''}}" bind:tap="ifclick" data-number="2">基地新闻</view>
</view>

1.1.2js文件代码

/* js文件代码 */
data: {
        number:0,
        screhei:0
    },
    ifclick:function(e) {
        if (e.currentTarget.dataset.number===this.data.number) {
            return false
        }else{
            this.setData({
                number:e.currentTarget.dataset.number
            })
        }
    }

1.1.3wxss代码

.tabitem{                /*默认未选中样式*/
	width: 250rpx;
	border-bottom: 2rpx solid gray;
}
.click{                  /*点击后选中样式*/
	border-bottom: 4rpx solid green;
}   /*使下边框变粗换色*/

1.1.4步骤一代码解析

首先给三个view标签添加相同的bind:tap="ifclick"事件，在相应事件的同时设置一个各不相同的“number”作为各自的标识data-number="0&1&2"，进入js的ifclick:function(e)方法，进行判断，由于data{number:0}中我们默认初始化的等于0，经过三元运算class="tabitem {{number==0 ?'click':''}}"，所以在小程序默认未进行操作前都是以“最新资讯”为选中状态的，若操作点击了另外两个导航卡，进入此方法经过判断若通过e.currentTarget.dataset.number方式获取到标签中的data-number="0&1&2"属性值与data{number:0}的值不同，则进行this.setData({number:e.currentTarget.dataset.number})set方法修改number的值与界面标签中的标识一致，反之判断相同直接跳出if判断即可，再进入wxml文件经过三元运算class="tabitem {{number==0 ?'click':''}}"的判断，底部滑块就可与导航卡相对应，就此点击导航卡切换滑块即可实现。

1.2 步骤二左右滑动底部滑块使顶部导航卡切换

1.2.1效果图

1.2.2wxml代码

案例代码，滑块一二三内容像同，如需要请替换

<swiper current="{{number}}" bindchange="swiif" class="swi_item">
	<swiper-item>
		<scroll-view scroll-y style="height:{{screhei}}px;" bindscrolltolower="downhint">
			<view class="item_box" wx:for="{{18}}">
				<view class="item_text">某某数字成功入选湖南省产教融合型企业</view>
				<view class="item_text">2023-07-09</view>
			</view>
		</scroll-view>
	</swiper-item>
                  
    <!-- 滑块2 -->
	<swiper-item>...</swiper-item>

	<!-- 滑块3 -->
	<swiper-item>...</swiper-item>
</swiper>

1.2.3js代码

swiif:function(e) {
        if (e.detail.current===this.data.number) {
            return false
        }else{
            this.setData({
                number:e.detail.current
            })
        }
    }

1.2.4步骤一代码解析

滑块控制导航卡实现原理与1.1.4导航卡切换滑块代码解析相同，前者是滑块控制导航卡根据以滑块的current="{{number}}"值为依赖<swiper>标签中的current属性是由索引0开始的，若是有n个滑块就从0~(n-1)，相同就不变，不同就修改为滑块的number,后者就是以导航卡控制滑块以导航卡的data-number="0&1&2"值为依赖，相同就不变，不同就修改为滑块的number

1.3 知识点汇总

class="tabitem {{number==0 ?'click':''}}"这个类选择器定义中用到了三元运算以及同标签多个class选择器
三元运算格式：条件判断 ? 表达式A : 表达式B; 若条件判断为true执行表达式A，反之执行表达式B
同标签多个class选择器：在标签中命名多个class名只需要将多个class名称之间用，英文逗号分隔即可
data-number="0"格式：data-'属性名'="属性值"，常用于从界面往后台传值通过：e.currentTarget.dataset.属性名获取
其中bind:tap="ifclick"是点击事件；number是xx.js文件中的之定义数据

1.3.1 完整wxml代码

<!-- 头部选项卡 -->
<view class="tabbox">
	<view class="tabitem {{number==0 ?'click':''}}" bind:tap="ifclick" data-number="0">最新资讯</view>
	<view class="tabitem {{number==1 ?'click':''}}" bind:tap="ifclick" data-number="1">行业新闻</view>
	<view class="tabitem {{number==2 ?'click':''}}" bind:tap="ifclick" data-number="2">基地新闻</view>
</view>
<!-- 底部对应滑块 -->
<swiper current="{{number}}" bindchange="swiif" class="swi_item">
	<swiper-item>
		<scroll-view scroll-y style="height:{{screhei}}px;" bindscrolltolower="downhint">
			<view class="item_box" wx:for="{{18}}">
				<view class="item_text">某某数字成功入选湖南省产教融合型企业</view>
				<view class="item_text">2023-07-09</view>
			</view>
		</scroll-view>
	<!-- 2 -->
	</swiper-item>
	<swiper-item>
		<scroll-view scroll-y style="height:{{screhei}}px;" bindscrolltolower="downhint">
			<view class="item_box" wx:for="{{18}}">
				<view class="item_text">某某数字成功入选湖南省产教融合型企业</view>
				<view class="item_text">2023-07-09</view>
			</view>
		</scroll-view>
	</swiper-item>
	<!-- 3 -->
	<swiper-item>
		<scroll-view scroll-y style="height:{{screhei}}px;" bindscrolltolower="downhint">
			<view class="item_box" wx:for="{{18}}">
				<view class="item_text">某某数字成功入选湖南省产教融合型企业</view>
				<view class="item_text">2023-07-09</view>
			</view>
		</scroll-view>
	</swiper-item>
</swiper>

1.3.2 完整 js代码

Page({

    /**
     * 页面的初始数据
     */
    data: {
        number:0,
        screhei:0
    },
    ifclick:function(e) {
        if (e.currentTarget.dataset.number===this.data.number) {
            return false
        }else{
            this.setData({
                number:e.currentTarget.dataset.number
            })
        }
    },
    swiif:function(e) {
        if (e.detail.current===this.data.number) {
            return false
        }else{
            this.setData({
                number:e.detail.current
            })
        }
    },
    downhint:function() {
        wx.showToast({
          title: '已到底啦！',
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            screhei:wx.getSystemInfoSync().windowHeight
        })
    }
})

1.4 扩展内容

滑块滑动到底部提示用户已到底解析文章：👉http://t.csdnimg.cn/VeWZ9

Tom_yangyang

关注

27
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
微信小程序滑动列表组件＜swiper＞与＜swiper-item＞

set方法修改number的值与界面标签中的标识一致，反之判断相同直接跳出if判断即可，再进入wxml文件经过三元运算class="tabitem {{number==0?'click':''}}"的判断，底部滑块就可与导航卡相对应，就此点击导航卡切换滑块即可实现。滑块控制导航卡实现原理与1.1.4导航卡切换滑块代码解析相同，前者是滑块控制导航卡根据以滑块的。，相同就不变，不同就修改为滑块的number,后者就是以导航卡控制滑块以导航卡的。值为依赖，相同就不变，不同就修改为滑块的number。
复制链接

扫一扫