小程式滑動點選切換中間大圖兩邊小圖
阿新 • • 發佈:2019-01-05
小程式 滑動點選 切換中間大圖 兩邊小圖
整體思路, 使用小程式API的animation動畫和元件的canvas中的bindtouchstart.bindtouchmove和bindtouchend組合 移動的效果和輪播圖原理相同 ,根據觸控距離判定點選和滑動 示例小程式:人人都是屌絲 小程式 banner第一張進入 , 首先是WXML的部分構建 <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> </view> </view> </view>
然後是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%父級寬高
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中,可能是小程式開發者寫錯位置了,不需要寫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 時定為點選
//點選的時候 點左邊,左邊的小圖,移動到中間變大 點選右邊的時候 同理
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
})
},