**

uniapp使用wxs如何手写swiper

**

了解wxs

WXS是小程序的一套脚本语言。
具体api:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/
官方实例：https://uniapp.dcloud.io/frame?id=wxs

创建wxs

再vue文件新建script标签
module就是自己定义的一个模块名

结构

html部分

<view class="header">
		<u-sticky offset-top="0">
			<u-tabs :list="swiperList" active-color="#333333" inactiveColor='#666666' :is-scroll="false"
				:current="swiperCurrent" @change="change" font-size="28"></u-tabs>
		</u-sticky>
		<view style="overflow: hidden;width: 750rpx;">
			<!-- swiper -->

			<!-- 移动端宽度750rpx，多少个swiper列表就*几-->
			<!-- 这里用的是定位来实现(有些场景swiper里会用到吸顶效果，吸顶用的定位来实现，但uni用的transition来实现，transition和定位会有冲突，具体原因百度) -->
			<!-- touch就是你定义的模块.释放的方法-->
			<!-- :prop='swiperCurrent'wxs派发swiperCurrent方法 -->
			<view id='swiper' style="overflow: hidden;display: flex;position: relative;"
				:style="{'width':winWidth*2+'rpx'}" @touchstart="touch.touchstart"
				@touchmove="touch.touchmove" @touchend="touch.touchend" :prop='swiperCurrent'
				:change:prop='touch.change'><!-- 监听 -->
				<!-- 组件1 -->
				<view style="width: 750rpx;">
					<img-list ref="one"></img-list>
				</view>
				<!-- 组件2 -->
				<view style="width: 750rpx;">
					<img-list-two ref='two'></img-list-two>
				</view>
			</view>
		</view>
	</view>

wxs部分

let startX = 0 // 触摸起始点
	let startY = 0
	let distanceX = 0 //结束点
	let distanceY = 0
	let translateX = 0 //移动x轴位置
	let isMove = false //是否移动开关
	let index = 0
	let width = uni.getSystemInfoSync().windowWidth //屏幕宽度
	//结束定位
	function addLeft(ins, xwidth) {
		ins.selectComponent('#swiper').setStyle({
			'transition': 'all .3s',
			// 'transform': `translateX(${xwidth}px)`
			'left': `${xwidth}px`
		})
	}
	//移除定位
	function removeLeft(ins) {
		ins.selectComponent('#swiper').setStyle({
			'transition': 'none'
		})
	}
	//移动
	function setLeftX(ins, xwidth) {
		ins.selectComponent('#swiper').setStyle({
			'left': `${xwidth}px`,
			'transition': 'none'
		})
	}
	//监听外部changeSwiper方法
	function change(newValue, oldValue, ownerInstance, instance) {
		index = newValue
		addLeft(ownerInstance, -index * width)
		ownerInstance.callMethod('changeSwiper', index)
	}
	//触摸开始
	function touchstart(event, ins) {
		let touch = event.touches[0] || event.changedTouches[0]
		startX = touch.pageX
		startY = touch.pageY
		// event.preventDefault();
	}
	//触摸移动
	function touchmove(event, ins) {
		let touch = event.touches[0] || event.changedTouches[0]
		let moveX = touch.pageX
		let moveY = touch.pageY
		distanceX = moveX - startX
		distanceY = moveY - startY
		translateX = -index * width + distanceX
		if ((distanceX < 0 && index === 0) || (distanceX > 0 && index === 1)) {
			removeLeft(ins)
			setLeftX(ins, translateX)
			isMove = true
		}

	}
	//触摸结束
	function touchend(event, ins) {
		let touch = event.touches[0] || event.changedTouches[0]
		if (isMove) {
			if (Math.abs(distanceX) > width / 4) {
				// 切换
				if (distanceX > 0) {
					index = 0
				} else {
					index = 1
				}
			}
			addLeft(ins, -index * width)
			ins.callMethod('changeSwiper', index)
		}
		startX = 0;
		distanceX = 0;
		isMove = false;
	}
	//导出模块
	module.exports = {
		change: change,
		touchend: touchend,
		touchstart: touchstart,
		touchmove: touchmove
	}

js部分(可以动态计算组件高度赋值，也可以用scroll-view)

<script>
	import imgList from './components/imgList.vue'
	import imgListTwo from './components/imgList2.vue'
	export default {
		components: {
			imgList,
			imgListTwo
		},
		data() {
			return {
				winWidth: 750,
				swiperList: [{
						name: '0'
					},
					{
						name: '1'
					}
				],
				swiperCurrent: 0,
				headerHight: 0
			}
		},
		computed: {
			//px转成rpx
			stickyHeight() {
				return Math.floor(Number(this.headerHight) / (uni.upx2px(Number(this.headerHight)) / Number(this.headerHight)))
			},
		},
		onReady() {
			this.$nextTick(() => {
				
			})
		},
		methods: {
			getHight() {
				setTimeout(()=>{
					if (this.swiperCurrent === 0) {
						this.headerHight = this.$refs.one.headerHight
					} else {
						this.headerHight = this.$refs.two.headerHight
					}
				},1000)

			},
			change(index) {
				this.swiperCurrent = index
			},
			//wxs监听的方法
			changeSwiper(index) {
				this.swiperCurrent = index
				/* if (index === 0) {
					this.$refs.one.getHight()
					this.headerHight = this.$refs.one.headerHight
				} else {
					this.$refs.two.getHight()
					this.headerHight = this.$refs.two.headerHight
				} */
			}
		}
	}
</script>

组件

<template>
	<view class="list">
		<scroll-view scroll-y style="height: 100vh;">
			<view v-for="(item,index) in 10" :key='index'>
				<image style="width: 200rpx;height: 200rpx;"
					src="https://files.yzsheng.com/AccountDefaultImg/HeadPortrait.png">
				</image>
				<text>{{index+1}}</text>
			</view>
		</scroll-view>
	</view>
	
</template>

<script>
	export default {
		data(){
			return{
				headerHight:0
			}
		},
		methods:{
			getHight() {
				//组件
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.list').boundingClientRect(data => {
						this.headerHight = data.height
						console.log(data.height,'高度1')
					}).exec()
				})
			
			},
		}
	}
</script>

<style>
</style>