小程序滑动点击切换中间大图两边小图

小程序 滑动点击 切换中间大图 两边小图

代码太老了已不建议阅读, 简单看下思路即可

整体思路, 使用小程序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中,可能是小程序开发者写错位置了,不需要写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)
            }

        }

//遍历数组 与下标值相等的样式数组,即为中间的大图的下标

修改这个下标的样式,就可以放大, 其他的重置

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 
})