微信小程序页签切换-swiper滑块

一时失言乱红尘 2021-09-19 00:48 898阅读 0赞

## 前言：swiper是滑块视图容器，swiper里面只能放swiper-item。点击、滑动这两个事件会改变改current 值，点击或者滑动都会修改current绑定的值，则会切换到对应的下标index也就是显示swiper里面的对应的swiper-item。 ##

--------------------

swiper的更多属性可以去官网查看：[https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html][https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html]

--------------------

PS：下标分为三项，分别是：今天、明天、后天;点击该项就会切换至对应的内容。

--------------------

**最终示例效果：**  
![在这里插入图片描述][20200326115613473.gif]

--------------------

**1.wxml**

--------------------

**2.wxss**

.home{ width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
    
    .log{ height: 10%;display: flex;justify-content: space-between;align-items: center;padding: 0 20rpx;}
    
    .default{ color: black;}
    
    .swiper_box{ border: 1px solid red;height: 90%;margin: 0 20rpx;}
    
    .log_box{ padding-bottom: 20rpx;}
    
    .selected{ color: red;padding-bottom: 20rpx;border-bottom: 5rpx solid red;}

--------------------

**3.js**

Page({ 
    	data: { 
    		list: [{ 
    				name: '今天'
    			},
    			{ 
    				name: '明天'
    			},
    			{ 
    				name: '后天'
    			},
    		],
    		currentTab: 0,
    	},
    
    	// 点击切换
    	switchNav: function(e) { 
    		var that = this;
    		if (this.data.currentTab == e.currentTarget.dataset.index) { 
    			return false;
    		} else { 
    			that.setData({ 
    				currentTab: e.currentTarget.dataset.index
    			});
    		}
    	},
    
    	// 滑动切换
    	bindChange: function(e) { 
    		// console.log(e)
    		var that = this;
    		that.setData({ 
    			currentTab: e.detail.current
    		});
    	}
    })

[https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
[20200326115613473.gif]: /images/20210724/3a16faec3b314806bb22e5f5fa76fed6.png