小程序滑动点击切换中间大图两边小图
2024-04-11 08:26:01
小程序 滑动点击 切换中间大图 两边小图
代码太老了已不建议阅读, 简单看下思路即可
整体思路, 使用小程序API的animation动画和组件的canvas中的bindtouchstart.bindtouchmove和bindtouchend组合
移动的效果和轮播图原理相同 ,根据触摸距离判定点击和滑动
<view class='middle'><view class='middle-down'> <image class='middle-phone' style='width:{{middlePhoneWidth}}px;margin-left: - {{middlePhoneWidthMarLeft }}px;' src='' > </image> </view> <view class='swiper'> <view class='swiper-lb' bindtouchmove="scroll" bindtouchstart='startTou' bindtouchend='endTou'> <view animation="{{animationData}}" class='swiper-ul' style='width:{{swiperUlWidth}}px;left: {{swiperLeft}}px;'> <view id='swiper{{index}}' class='swiper-li' wx:for="{{images}}" style='width:{{swiperLiWidth}}px;'> <image animation="{{styleArr[index].animationliscal}}" class='swiper-image swiper-image{{index}} ' src='{{item.picUrl}}' style='width:{{styleArr[index].imgwidth}}%;height:{{styleArr[index].imgheight}}%'></image> </view>
</view>.middle{ width: 100%; height: 540rpx; position: relative; }
.middle-down{ width: 100%; height: 100%; position: relative; }
.middle-bg{ width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.middle-phone{ width: 282rpx; height: 383rpx; position: absolute; left: 50%; top: -20rpx; z-index:10; }
.swiper{ position: absolute; width: 100%; left: 0; top: 14px; z-index: 11; height: 205px; } .swiper-lb{ height: 205px; width: 100%; /* background: #fff; */ overflow: hidden; position: relative; }
.swiper-ul{ position: absolute; top: 0; left:0; height: 152px; /* background: #ffe400; */ } .swiper-li{ height: 100%; padding-left: 5px; padding-bottom: 10px; float: left; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
.swiper-image{ }
.swiper-image1{ width: 100%; height: 100%; }根据小程序API的animation动画和组件的canvas中的bindtouchstart.bindtouchmove和bindtouchend组合
imageWidth:0,
imageHeight:0,
phoneWidth: 0, //屏幕宽 根据屏幕的宽度,三分之一为li的宽度
phoneHeight: 0, //屏幕高
swiperWidth:0,
imgindex:1,//中间的下标 重点
middlePhoneWidthMarLeft:0, //背景的图片的margin-left=-aaa
middlePhoneWidth:0, //背景
swiperUlWidth:0, //移动的ul的宽度
swiperLiWidth:0, //移动的li的宽度
swiperLeft:0, //移动的定位
left animationData: {},//运动
startClientX: 0,//点击开始 X 轴位置
endClientX: 0,//点击结束 X 轴位置
images:[], //图片的数据
styleArr:[], //所有图片的样式数组 对中间的图片放大的操作组
duration: 1000, //动画时间然后是初始对数据的第二张图进行放大处理
首先是初始化 获取数据
onLoad: function () { console.log('onLoad') var _this = this; //===取屏幕宽度======= wx.getSystemInfo({ success: function (res) { // _this.data.screenHeight= res.windowHeight; _this.setData({ phoneWidth: res.windowWidth }) } });
});//=======带data参数 请求数据====================
wx.getStorage({key: 'Id',success: function (res) {console.log(res.data)wx.request({url: '',data: {Id: res.data,},method: "POST",header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},success: function (res) {console.log(res.data)if (res.data.respCode == '00000') {_this.setData({images: res.data.respData.pics,//图片数据json的示例persNub: res.data.respData.count,})console.log(_this.data.images)//swiper li 赋值 宽度let swiperLiWidth = _this.data.swiperLiWidth;//li宽let phoneWidth = _this.data.phoneWidth; //屏幕宽swiperLiWidth = phoneWidth / 3; //li的宽度赋值 三分之一的屏幕宽度var arrimages = _this.data.images;//获取图片Arr的数组let swiperUlWidth = _this.data.swiperUlWidth; //移动的ul 的宽度swiperUlWidth = swiperLiWidth * arrimages.length //赋值移动的ul 的宽度let middlePhoneWidth = swiperLiWidth + 30; // 背景参照物 可不写let middlePhoneWidthMarLeft = middlePhoneWidth / 2; 背景参照物 可不写//初始化所有的图片的宽度占70%父级宽高var arrimages = _this.data.images; let styleArr = _this.data.styleArr; for (let i = 0; i < arrimages.length; i++) {var obj = {imgwidth: 70,imgheight: 70,animationliscal: ""}styleArr.push(obj)}//对中间图赋值初始化100%宽高styleArr[1] = {imgwidth: 100,imgheight: 100,animationliscal: ""};// 传输data 赋值 这样写不知道对不对_this.setData({styleArr: styleArr,swiperUlWidth: swiperUlWidth,swiperLiWidth: swiperLiWidth,middlePhoneWidth: swiperLiWidth + 30,middlePhoneWidthMarLeft: middlePhoneWidthMarLeft})} else {console.log(res.data.respMsg)}},fail: function (res) {console.log(res)}})}})
})进行滑动点击的
滑动为0时,就为点击 ;不为0 根据结束位置-初始位置来设置相应的移动
具体请参考 小程序开发 组建中的canvas 滑动点击的事件.至于为什么在canvas中,可能是小程序开发者写错位置了,不需要写canvasstartTou:function(e){ let _this = this; _this.data.startClientX = e.touches[0].clientX; //触摸按下 距离屏幕左边的值 },
scroll: function (e) { let _this = this; _this.data.endClientX = e.touches[0].clientX; //滑动值
},
endTou: function (e) { let _this = this;// API animation 滑动动画创建var animation = wx.createAnimation({duration: 1000,timingFunction: 'ease',})var swiperLiWidthLeft= _this.data.swiperLiWidth;this.animation = animation;let startClientX = _this.data.startClientX;let endClientX = _this.data.endClientX;let phoneWidth = _this.data.phoneWidth;if ( endClientX ==0 ) { //move的值为0 时定为点击 //点击的时候 点左边,左边的小图,移动到中间变大 点击右边的时候 同理if (startClientX < phoneWidth / 2-70) { //点击开始的位置,与图片的一半减70px 为左边点击this.animation = animation;animation.left(_this.data.swiperLeft).step() //移动动画let imgindex = _this.data.imgindex -1; //下标值if (imgindex < 0 ){console.log("超出了最小数组长度")return;}_this.setData({swiperLeft: _this.data.swiperLeft + swiperLiWidthLeft, //ul向右移动值imgindex: _this.data.imgindex - 1, //下标值animationData: animation.export()})console.log("左边点击" + _this.data.imgindex)}else if (startClientX > phoneWidth / 2+70) { //点击开始的位置,与图片的一半减70px 为右边点击let imgindex = _this.data.imgindex +1;if (imgindex > _this.data.images.length - 1 ) {console.log("超出了数组最大长度")return;}console.log("右边点击" + _this.data.imgindex)animation.left(_this.data.swiperLeft).step() //移动动画_this.setData({swiperLeft: _this.data.swiperLeft - swiperLiWidthLeft,//UL向左移动imgindex: _this.data.imgindex +1, //下标的值animationData: animation.export()})}else{ //点击中间的大图,带参跳入图片的详情let imgindexclick = _this.data.imgindex;let picUrl = _this.data.images[imgindexclick].picUrl;let clicks = _this.data.images[imgindexclick].clicks;let picUpTime = _this.data.images[imgindexclick].picUpTime;let picId = _this.data.images[imgindexclick].picId;wx.navigateTo({url: './../PictDetails/PictDetails?picUrl=' + picUrl })}}else{ //滑动左边 ul向左移动 右边的小图放大 滑动右边ul向右移动 右边的小图放大if (endClientX -startClientX > 0) { let imgindex = _this.data.imgindex -1;if (imgindex <0 ) {console.log("超出了")return;}animation.left(_this.data.swiperLeft).step() //移动动画_this.setData({swiperLeft: _this.data.swiperLeft + swiperLiWidthLeft, //右边滑动 ul向右移动imgindex: _this.data.imgindex - 1,animationData: animation.export()})console.log("右边滑动" + _this.data.imgindex)}if (endClientX - startClientX < 0) {let imgindex = _this.data.imgindex + 1;if (imgindex > _this.data.images.length - 1) {console.log("超出了")return;}this.animation = animationanimation.left(_this.data.swiperLeft).step() //移动动画_this.setData({swiperLeft: _this.data.swiperLeft - swiperLiWidthLeft, //左边滑动 ul向左移动imgindex: _this.data.imgindex + 1, //下标的值animationData: animation.export()})console.log("左边滑动" + _this.data.imgindex)}}//遍历数组 与下标值相等的样式数组,即为中间的大图的下标
修改这个下标的样式,就可以放大, 其他的重置
for (let a = 0; a < NewstyleArr.length;a++ ){ if (a == _this.data.imgindex ){NewstyleArr[_this.data.imgindex] = { imgwidth: 100, imgheight: 100, animationliscal: "" }; }else{NewstyleArr[a] = { imgwidth: 70, imgheight: 70, animationliscal: "" }; }
}//返回修改的数据数组到data中
_this.setData({startClientX : 0 ,endClientX: 0 ,styleArr: NewstyleArr
})小程序滑动点击切换中间大图两边小图相关推荐
- 微信小程序 swiper 点击切换，左右滑动，自动滑动，源码下载
已解决不同页面不同高度 已解决卡死问题 .wxml <view class="swiper-tab"> <view class="swiper-ta ...
- 微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下 我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
- 微信小程序实现点击左右按钮切换时间与DatetimePicker 时间选择组件相结合
小程序实现左右按钮切换时间和DatetimePicker 时间选择组件相结合使用 主要功能的实现思路就是将我们的正常时间转成时间戳,在时间戳的基础上加一天(减一天),然后再转换成正常的时间 WXML ...
- 小程序卡片叠层切换卡片_现在，卡片和清单在哪里？
小程序卡片叠层切换卡片 重点 (Top highlight) 介绍 (Intro) I was recently tasked to redesign the results of the follo ...
- 微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果 思路: 使用微信小程序的swiper组件,使其竖向滑动 分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页 问题: 加载多个视频时,多个视频会同时播放 效果图 ...
- 解决小程序自定义底部菜单切换闪动
解决小程序自定义底部菜单切换闪动 业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求 但是自定义底部菜单会有一个问题,在点击切换页面的时候底部菜单会重新加载,导致页面闪动,比较影响用 ...
- 微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
- 微信小程序中的Tab切换
微信小程序中的Tab切换 使用步骤 使用步骤 代码如下(示例): 定义一个状态status data: {status: 0,}, 代码如下(示例): 在点击切换时利用status来切换根据index ...
- 按钮点击_如何设置微信小程序按钮点击事件？
当我们需要点击按钮实现一个操作时,我们应该怎么设置?这里给大家介绍两种方法: 方法一:使用小程序模板,无需懂技术. 这种方法比较简单,你只需要选一个比较简单的小程序模板,比如「上线了」sxl.cn,在 ...
最新文章
- 【Java】剑指 Offer II 022. 链表中环的入口节点
- MySQL高级查询语句
- PE学习（六）第六章 栈与重定位表 实例栈溢出、模拟加载器加载DLL、遍历重定位表
- jQuery的入口函数
- gis影像格式img转为ecw_微图影像地图导出拼接大图的参数说明
- js获取时间段内属于星期一的日期们
- Python地理可视化工具包 folium介绍
- linux crontab怎么写,linux定时任务crontab
- 工业交换机常用术语及常见知识点汇总
- Python RSA加密与解密 公钥和私钥 读写pem文件
- 粤嵌GE6818实现识别触摸坐标的识别
- 【刷题】LOJ 2863 「IOI2018」组合动作
- 数论 | 秦九韶算法（Horner法则）
- HTML5小游戏之爱心鱼
- java接口自动化监控_java接口自动化（三） - 手工接口测试到自动化框架设计之鸟枪换炮...
- 2010年最新世博攻略
- html转换txt文本格式方法,hthtml转txtml转换txt文本格式方法
- 基于重心距离识别的蠓虫分类模型(唯一能看的只有代码)
- 刘群：基于深度学习的自然语言处理，边界在哪里？
- 全球大学生为之打Call，这场ICT大赛已成“懂行人”的起点