微信小程序滑动切换之swiper

最新推荐文章于 2023-07-25 12:40:46 发布

原创最新推荐文章于 2023-07-25 12:40:46 发布 · 2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序 #javascript

针对小程序中swiper组件无法设置动态高度的问题，本文分享了一种通过触摸事件和滑动角度计算实现自定义滑动切换效果的方法。

小程序项目中遇到几个需要滑动切换效果，上来用的swiper组件写了几行之后发现有的代码不见了，调试代码之后发现swiper高度问题导致的，swiper默认高度150 超出之后隐藏了查询之后发现sweiper无法设置动态高度，只能设置固定高度，百度了之后网上有几种方法，试过之后都不太好用

试过百度的2种方法：

1 在swiper之间嵌套scorll-view 这个需要先获取屏幕高度用了之后发现不好使弃用

2 在swiper-item 的内容部的前后加俩个空标签来获取内容高度实验之后发现也不好使

在网上继续找找到了一个方法给的思路就是循环加触发事件来滑动（滑动事件）下面看代码

js逻辑代码

data:{
        currentIndex: 1, //切换下标
		cardRightIn: false, //右
		cardLeftIn: false,//左
}
//触摸事件 手指触摸屏幕
touchstart: function (e) {
		this.setData({
			startX: e.changedTouches[0].clientX,
			startY: e.changedTouches[0].clientY
		})
	},
	//滑动事件处理
	touchmove: function (e) {
		let idx = e.currentTarget.dataset.index;
		let startX = this.data.startX,//开始X坐标
			startY = this.data.startY,//开始Y坐标
			touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
			touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
			//获取滑动角度
			angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });

		//滑动超过45度角 return
		if (Math.abs(angle) > 45) return;

		if (touchMoveX > startX) { //右滑
			this.setData({
				currentIndex: idx == 0 ? 0 : idx - 1,
				cardRightIn: false,
				cardLeftIn: true
			})
		} else {
			this.setData({
				currentIndex: idx == this.data.list.length - 1 ? idx : idx + 1,
				cardRightIn: true,
				cardLeftIn: false
			})
		}
		wx.pageScrollTo({
			scrollTop: 0
		})

	},
	/**
   * 计算滑动角度
   * @param {Object} start 起点坐标
   * @param {Object} end 终点坐标
   */
	angle: function (start, end) {
		var _X = end.X - start.X,
			_Y = end.Y - start.Y
		//返回角度 /Math.atan()返回数字的反正切值
		return 360 * Math.atan(_Y / _X) / (2 * Math.PI)
	},

html代码这里是小程序


  <view class="con-wrap ripple {{cardRightIn?'flipInY':''}} {{cardLeftIn?'fadeInLeft':''}}" wx:for="{{list}}" wx:if="{{index==currentIndex}}" wx:key="index">
 <view class="abouteam-title" bindtouchstart="touchstart" bindtouchmove="touchmove" data-index="{{index}}">
   <view>这里写内容正常布局</wiew>
<view>这里写内容</wiew>
<view>这里写内容</wiew>
</view>
</view>

完成代码放在GitHub上面的 https://github.com/getname-0712/wx-swiper

大家有需要可以去看看不足之处欢迎更正！