效果图:[ qq 录制有点儿问题,凑合着看下效果图]
点击左右按钮切换图片。
在swiper中禁止touch切换页面: 在swiper-item 里面添加事件catchtouchmove
<swiper-item catchtouchmove="stopTouchMove">
<image src="{{item}}" mode="widthFix" bindload="imgLoad" bindtap="changeImg"></image>
</swiper-item>
// 禁止手动滑动触发 swiper
stopTouchMove(){
return false;
}
代码展示:
<image id="swiperImg"></image>
<swiper wx:if="{{swiper.currentImgW}} && {{swiper.viewHeight}}" style="height:{{swiper.viewHeight}}px;width:{{swiper.currentImgW}}px" current="{{swiper.current}}">
<block wx:for="{{swiper.paperList}}" wx:key="index">
<swiper-item catchtouchmove="stopTouchMove">
<image src="{{item}}" mode="widthFix" bindload="imgLoad" bindtap="changeImg"></image>
</swiper-item>
</block>
</swiper>
var that;
Page({
data: {
swiper:{
paperList: [
'http://img4.imgtn.bdimg.com/it/u=2229864841,4232235061&fm=26&gp=0.jpg',
'http://g.hiphotos.baidu.com/zhidao/pic/item/c83d70cf3bc79f3d6e7bf85db8a1cd11738b29c0.jpg',
'http://big5.wallcoo.com/photograph/summer_feeling/images/%5Bwallcoo.com%5D_summer_feeling_234217.jpg',
'http://big5.wallcoo.com/nature/Hokkaido_summer_field/images/Hokkaido_summer_field_picture_13652941_3540148.jpg'
],
currentImgW: '', // 页面上当前swiper里面image的宽度
viewHeight: '', // 页面上swiper里面的image的高度
current:0
}
},
onShow: function () {
that = this;
// 获取页面上当前swiper里面图片的宽度
let query = wx.createSelectorQuery();
var swiper = that.data.swiper;
query.select('#swiperImg').boundingClientRect(function (rect) {
console.log('rect', rect.width);
swiper.currentImgW = rect.width
that.setData({
swiper
})
}).exec();
},
// 图片加载完触发
imgLoad(e){
that = this;
var imgW = e.detail.width,
imgH = e.detail.height,
ratio = imgW / imgH;
let swiper = that.data.swiper;
swiper.viewHeight = parseInt(swiper.currentImgW / ratio)
that.setData({
swiper
})
console.log(swiper.viewHeight);
},
// 改变时触发
bindchange(e){
console.log(e);
},
// 上一页
prevImg(){
that = this;
var swiper = this.data.swiper;
var current = swiper.current;
swiper.current = current > 0 ? current - 1 : swiper.paperList.length - 1;
that.setData({
swiper
})
},
// 下一页
nextImg(){
that = this;
var swiper = this.data.swiper;
var current = swiper.current;
swiper.current = current < (swiper.paperList.length - 1) ? current + 1 : 0;
that.setData({
swiper
})
},
// 禁止手动滑动触发 swiper
stopTouchMove(){
return false;
}
})
.content{
width: 100%;
height: auto;
box-sizing: border-box;
padding-top: 12rpx;
}
#swiperImg{
position: absolute;
width: 700rpx;
left: 50%;
transform: translate(-50%);
}
.bottom_btn_part{
width: 100%;
position: absolute;
left: 0;
/* bottom: 10rpx; */
}
.bottom_btn_part button{
width: 180rpx;
height: 80rpx;
line-height: 80rpx;
color: #fff;
border-radius: 16rpx;
background: rgba(0,0,0,.5);
position: absolute;
left: 50%;
bottom: 15rpx;
transform: translate(-50%);
}
.left_arrow_part{
width: 80rpx;
height: 80rpx;
background-color: rgba(0,0,0,.5);
position: absolute;
left: 10rpx;
bottom: 15rpx;
border-radius: 16rpx;
text-align: center;
}
.left_arrow_part image{
width: 16rpx;
height: 26rpx;
margin-top: 28rpx;
}
.right_arrow_part{
left:initial;
right: 10rpx;
}
.box{
box-sizing: border-box;
height: 60px;
border: 2px dashed #fed23d;
position: absolute;
top: 0;
left: 0;
}
.box .left_icon_txt{
width: 112rpx;
height: 44rpx;
line-height: 44rpx;
position: absolute;
left: 0;
top: -55rpx;
z-index: 5;
}
.box .left_icon_txt image{
width: 112rpx;
height: 50rpx;
}
.box .left_icon_txt view{
position: absolute;
right: 0;
font-size: 24rpx;
padding-right: 10rpx;
color: #333333;
}
.box .left_icon_txt_gray{
line-height: 44rpx;
position: absolute;
left: 0;
top: -55rpx;
z-index: 5;
font-size: 24rpx;
}
.box .left_icon_txt_gray view{
background: #999999;
color: #fff;
padding:0 15rpx;
}
image{
display: block;
margin: 0 auto;
}
swiper{
margin:0 auto;
}
swiper image{
width: 100%;
height: auto;
}