**
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>