微信小程序自制轮播图（仿京粉轮播）

效果图如下所示

.wxml

<view class="index"><view class="center curr{{curr > index?((curr - index) > 1?2:1):(index - curr) > 2?1:index - curr}}" wx:for="{{detail}}" wx:key="index" bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend="touchEnd"><view class="center-image"><image src="{{item.img}}"></image></view><view class="center-ney"><view>{{item.name}}</view></view></view>
</view>

.wxss

page{background-color: #f7f7f7;
}
view,image{box-sizing:border-box;
}
.index{width: 100%;float: left;overflow: hidden;padding: 3%;background-color: #e54d42;position: relative;
}
.center{float: left;overflow: hidden;background-color: #fff;padding: 3%;border-radius: 10rpx;transition: all 0.5s;
}
.center-image{width: 30%;height: 100%;float: left;
}
.center-image>image{width: 100%;height: 100%;
}
.center-ney{width: 70%;height: 100%;float: left;padding: 0 0 0 3%;font-size: 24rpx;
}
.center-ney>view{width: 100%;float: left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;
}.curr2{width: 94%;height: 160rpx;margin: 20rpx 0;position: absolute;left: 3%;z-index: 1;opacity: 0.8;
}
.curr1{width: 91%;height: 180rpx;margin: 10rpx 0;position: absolute;left: 3%;z-index: 2;opacity: 0.9;
}
.curr0{width: 94%;height: 200rpx;position: relative;left: 0;z-index: 3;
}

.js

Page({data: {detail:[{ img: 'http://img3.imgtn.bdimg.com/it/u=1960330002,2943700579&fm=26&gp=0.jpg', name:'1111111111111111111111111111111111'},{ img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=225193914,751284870&fm=26&gp=0.jpg', name:'222222222222222222222222222222'},{ img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3019995954,636527762&fm=26&gp=0.jpg', name:'3333333333333333333333333333333'},{ img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F13%2F20170713140843_KrwNF.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642297008&t=55ea63589d129189d7971f4e7ebf99ed', name:'44444444444444444444444444444'},],curr:0,towards:'',interval:''},onShow:function(e){let that = thisthat.data.interval = setInterval(function () {that.calation(1)},3000)},calation(type){var that = thisif(type == 1){that.setData({curr: (that.data.curr + 1) >= that.data.detail.length?0:(that.data.curr + 1)})}else{that.setData({curr: (that.data.curr - 1) < 0?that.data.detail.length - 1:(that.data.curr - 1)})}},onHide: function () {clearInterval(this.data.interval)},onTabItemTap:function(){clearInterval(this.data.interval)},touchStart: function (e) {if (e.touches.length == 1) {this.setData({startX: e.touches[0].clientX});}},touchMove: function (e) {if (e.touches.length == 1) {var moveX = e.touches[0].clientX;var towards = this.data.startX - moveX;this.setData({towards: towards})}},touchEnd:function(e){let that = thisif (that.data.towards != ''){clearInterval(that.data.interval)if (that.data.towards < 0) {//向右that.calation(2)} else if (that.data.towards > 0) {//向左that.calation(1)}that.onShow();}},
})

有什么问题欢迎评论留言，我会及时回复你的

微信小程序自制轮播图（仿京粉轮播）相关推荐

微信小程序开源源码，仿淘宝、京东、今日头条等
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
微信小程序开源源码，仿京东、网易云、拼多多等
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...
微信小程序的订单评论页面-仿淘宝
微信小程序的订单评论页面-仿淘宝在网上搜了下,大部分都挺麻烦的,所以自己写了个,感觉还可以先看效果图: 需要用到的图片: 上代码: wxml: <view class='contains'& ...
视频教程-微信小程序项目实战：高仿iOS计算器-微信开发
微信小程序项目实战:高仿iOS计算器东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过1 ...
微信小程序canvas画价格走势图（一）
今天是周二,今天来开一个新坑吧.最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图,现在来分享一下经验. 因为内容比较多,所以打算这次分为多篇博客来写,这样一篇博客的内容就会更少.更清晰.下 ...
微信小程序组件思维导图
微信小程序组件思维导图
微信小程序中使用echarts图
嗨喽大家好,我是老黑.最近这段时间完成了一个功能,那就是在微信小程序中引入了echarts图,也算是对这段时间的工作的一个总结吧.这个功能自己花费了很长的时间才整出来.后来自己反省了以下,总结了以 ...
微信小程序开发坑背景图之微博图床
这几天在弄微信小程序,哇,那是一个深不见底的坑.唉~三番五次被腾讯拒之门外所以,最后我把我们最核心的东西(类似于朋友圈的备忘录)删除了,花了多少心血啊~ 这个先不提了,回到今天的主题,图床. 大家有 ...
微信小程序canvas画价格走势图（六）
到上一篇,可以说,所有的工作已经完成了,那为什么还会有第六篇呢?因为,客户改需求了,UI设计图改了,我也就不得不改代码,画一个新的版本出来.我在大功告成,开始写第一篇的时候突然改的,我也就准备加一篇来 ...

微信小程序自制轮播图（仿京粉轮播）

.wxml

.wxss

.js

微信小程序自制轮播图（仿京粉轮播）相关推荐

最新文章

热门文章