小程序滑动点击切换中间大图两边小图
小程序 滑动点击 切换中间大图 两边小图
整体思路, 使用小程序API的animation动画和组件的canvas中的bindtouchstart.bindtouchmove和bindtouchend组合
移动的效果和轮播图原理相同 ,根据触摸距离判定点击和滑动
示例小程序:人人都是屌丝 小程序 banner第一张进入 ,
首先是WXML的部分构建
然后是wxss.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%; }然后 js 部分我是根据小程序API的animation动画和组件的canvas中的bindtouchstart.bindtouchmove和bindtouchend组合
首先是data 定义初始数据
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的示例
/* images:
[
{
picUrl:./../img/s.png,
id:aa
},
{
picUrl:./../img/s.png,
id:aa
},
]
*/
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%父级宽高//=======带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的示例
/* images:
[
{
picUrl:./../img/s.png,
id:aa
},
{
picUrl:./../img/s.png,
id:aa
},
]
*/
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)
} 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: ""
}; //对中间图赋值初始化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)
}
})
}
})
}) // 传输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中,可能是小程序开发者写错位置了,不需要写canvas
startTou: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 时定为点击 // 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 = animation
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 (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 = animation
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)
}
}//修改中间大图的宽高 // animationliscal: "" 是准备写缩放的,但是时间不允许 所有没有写.
let NewstyleArr = _this.data.styleArr; //遍历数组 与下标值相等的样式数组,即为中间的大图的下标
修改这个下标的样式,就可以放大, 其他的重置
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
})
}, styleArr: NewstyleArr
})
},