微信小程序滑动切换之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代码  这里是小程序

  
 
   这里写内容正常布局
这里写内容
这里写内容

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

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