小程式滑動點選切換中間大圖兩邊小圖

阿新 • • 發佈：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 
        })

    },

小程式滑動點選切換中間大圖兩邊小圖