admin管理员组文章数量:1550527
微信小程序中的轮播图可以直接使用swiper组件,代码如下:
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
但是,但是,但是,总有嫔妃想要为难本宫,想要实现下面这个效果,swiper就不行了(下面图片拷贝,实现效果一致)
<view class='slider' style="width:{{winWidth}}px;">
<view>
<view bindtouchcancel="sliderTouchCancel" bindtouchstart='sliderTouchStart' bindtouchend='sliderTouchEnd' bindtouchmove='sliderTouchMove' style='width:{{SliderData.totalWidth}}px;display:flex;transform:translate({{SliderData.x}}px,0)'>
<block wx:for="{{SliderData.datas}}" wx:key="{{id}}" wx:for-index="i">
<view class="slider-item" style="padding-left:{{SliderData.blankWidth}}px;">
<image class="slider-img" src="{{item.avaimg}}"></image><!--图片-->
</view>
</block>
</view>
</view>
<view class="slider-indicate-dots">
<block wx:for="{{SliderData.indicateDots}}" wx:key="{{id}}" wx:for-index="i">
<view class="slider-indicate-dot {{i==SliderData.curPage-1?'active':''}}">
</view>
</block>
</view>
</view>
/*自定义轮播图样式 */
.slider{
display: block;
position: absolute;
top: 220rpx;
left: 0;
z-index: 9;
height: 322rpx;
overflow: hidden;
}
.slider .slider-item{
position:relative;
display:inline-block;
width:100%;
box-sizing:border-box;
line-height: 0;
}
.slider .slider-form{
position:relative;
display:inline-block;
width:100%;
border-radius: 6px;
}
.slider .slider-img{
border-radius: 6px;
width:100%;
height: 322rpx;
}
.slider .slider-item .carddetail{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 8;
}
.slider .slider-indicate-dots{
line-height: 0;
z-index:9999;
margin-top: -14px;
padding-bottom: 8px;
position: relative;
text-align:center;
}
.slider .slider-indicate-dot{
width:6px;
height:6px;
background:rgba(255, 255, 255, 0.5);
display:inline-block;
margin-right:4px;
border-radius:100%;
line-height: 0;
box-sizing: border-box;
}
.slider .button-hover{
background: none;
border:none;
}
.slider .slider-indicate-dot.active{
background: white;
width:16px;
border-radius:4px;
}
var myslider = require('../../slider.js');
Page({
data: {
vipList: [{'avaimg': '../../img/banner2.png' }, {'avaimg': '../../img/banner3.png' }, {'avaimg': '../../img/banner.jpg' }, {'avaimg': '../../img/banner1.jpg' }],
winWidth:0
},
onLoad: function () {
//做兼容处理,获取屏幕宽度,防止部分手机滑动轮播图,页面跟着动
this.setData({
winWidth: wx.getSystemInfoSync().windowWidth
})
myslider.initMySlider({
that: that,
datas: that.data.vipList,
autoRun: false,
blankWidth: 26,
newImgWidth: 18,
interval: 1500,
duration: 200,
direction: 'left',
startSlide: function (curPage) {
},
endSlide: function (curPage) {
}
});
}
})
上面引用的JS,来自伊人博客←点这里查看,不过他截图有的没有截完整,先看吧。
还有就是他写的滑动不是很顺畅,我优化了一下。
添加了全局变量:endPointX//用户手指触摸结束时x的坐标
在that.sliderTouchEnd中,添加endPointX = opt.changedTouches[0].clientX;//记录结束触摸点
在function slidePage(that,page)中,修改了几句
var remaingo = (perScreenX - Math.abs(lastx%perScreenX))%perScreenX;
var remain =endPointX - firstPointX;//判断向左还是向右
if(remain>0){
slideTo(that, perScreenX - remaingo);//往右
}else{
slideTo(that, -remaingo);//往左
}
他的版本中,必须要滑动半屏才可以切换,有时候滑动半屏也无法切换,用触摸结束点 -触摸开始点就知道是向左还是向右滑动,这样用户滑动一小段距离就可切换了
不明白的也可以问我,或者有更好的解决办法也请告知小妹,先行告谢,丘丘:508774301
版权声明:本文标题:微信小程序轮播图 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727247920a1104863.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论