tab切换效果

系统管理员 2021-07-25 02:44 512阅读 0赞

![20210203145157983.gif][]

该dome仅供参考:

免费项目dome包在文章最底部

**html**

<view class="mg_bo">
    	<view class="bg_bo">
    		<view class="content">
    			<view class="img_bo" bindtouchstart='moveStart' bindtouchend='moveItem'>
    				<view wx:for="{
       {sy_list}}" wx:key="index">
    					<view animation="{
       {item.animation}}" class=" img"
    						style="width:{
       {item.width}};height:{
       {item.height}};background:{
       {item.background}}; z-index:{
       {item.z_index}};opacity:{
       {item.opacity}};margin-top:{
       {item.margin_top}}"
    						bindtap="choose" data-id="{
       {item.id}}" data-item="{
       {item}}" data-index="{
       {index}}">
    						<image wx:if="{
       {index==tab_index}}"
    							style="width:{
       {item.img_width}};height:{
       {item.img_height}};margin-top:{
       {item.top}}" src="{
       {item.img_}}">
    						</image>
    						<image wx:else style="width:{
       {item.img_width}};height:{
       {item.img_height}};margin-top:{
       {item.top}}"
    							src="{
       {item.img}}"></image>
    						<view class="text_w"
    							style="  font-size: {
       {item.font_size}};color:{
       {item.color}};margin-top:{
       {item.text_top}}">
    							{
       {index+1}}
    						</view>
    					</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </view>

**css:**

.mg_bo {
      margin: 46rpx 25rpx 30rpx 25rpx;
    }
    
    .mg_bo .bg_bo {
      background: #fff;
      position: relative;
     border-bottom-left-radius: 20rpx;
     border-bottom-right-radius:20rpx ;
    }
    
    
    .mg_bo .bg_bo .page_bg {
      width: 100%;
      position: absolute;
      top: -20rpx;
      z-index: 1;
    }
    
    .mg_bo .bg_bo .content {
      position: relative;
      z-index: 2;
    }
    
    /*  */
    .mg_bo .bg_bo .content .ck_text {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #222426;
      width: 100%;
      text-align: center;
      padding-top: 45rpx;
    }
    
    .mg_bo .bg_bo .content .ck_tab {
      width: 80rpx;
      height: 40rpx;
      margin-top: 16rpx;
      margin-left: 50%;
      transform: translate(-50%, 0);
    }
    
    .mg_bo .bg_bo .content .qh_text {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #8C8C8C;
      width: 100%;
      text-align: center;
    
    }
    
    /*  */
    .img_bo {
      margin: 44rpx 40rpx 0rpx 40rpx;
      display: flex;
      justify-content: center;
      /*子元素水平居中*/
      align-items: center;
      /*子元素垂直居中*/
      display: -webkit-flex;
      height: 200rpx;
      position: relative;
      overflow: hidden;
    }
    
    .mg_bo .bg_bo .content .img_bo .img {
      border-radius: 20rpx;
      text-align: center;
      position: absolute;
      left: 0rpx;
      top: 0rpx;
      border: 4rpx solid #FFFFFF;
    }
    .text_w{
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .mg_bo .bg_bo .content .img_bo image {
      width: 57rpx;
      height: 57rpx;
    }

逻辑部分     首先我们得有个图片列表：

img_arr: [{
          img: '/images/1.png',
          img_: '/images/1_.png'
        },{
          img: '/images/2.png',
          img_: '/images/2_.png'
        },{
          img: '/images/3.png',
          img_: '/images/3_.png'
        },{
          img: '/images/4.png',
          img_: '/images/4_.png'
        },{
          img: '/images/5.png',
          img_: '/images/5_.png'
        },{
          img: '/images/6.png',
          img_: '/images/6_.png'
        },{
          img: '/images/7.png',
          img_: '/images/7_.png'
        },{
          img: '/images/8.png',
          img_: '/images/8_.png'
        },
      ],

然后用js动态赋值样式：

arrList() {
        let list = this.data.img_arr
        console.log(8888888888,list)
        let arr = []
        list.forEach((value, i) => {
          console.log('i:', i, 'value:', value)
    
          if (i == 0) {
            let arr1 = {
              show_img: value.img,//切换时的替换图
              img: value.img,//白图
              img_: value.img_,//灰图
              id: i,//排序
              width: '120rpx',//背景宽
              height: '120rpx',//背景高
              img_width: '56rpx',//图标宽
              img_height: '56rpx',//图标高
              font_size: '20rpx',
              top: '15rpx',
              text_top: '2rpx',
              z_index: 3,//层级
              background: '#F5F5F5',//背景
              opacity: 1,//透明度
              animation: '',动画效果
              left: 0,
              margin_top: '25rpx',
              color: '#8C8C8C',//颜色
            }
            arr[i] = arr1
          } else if (i == 1) {
            let arr1 = {
              show_img: value.img,
              img: value.img,
              img_: value.img_,
              id: i,
              width: '140rpx',
              height: '140rpx',
              img_width: '64rpx',
              img_height: '64rpx',
              font_size: '22rpx',
              text_top: '4rpx',
              z_index: 4,
              background: '#E8E8E8',
              top: '20rpx',
              opacity: 1,
              animation: '',
              left: 55,
              margin_top: '15rpx',
              color: '#8C8C8C',
            }
            arr[i] = arr1
          } else if (i == 2) {
            let arr1 = {
              show_img: value.img,
              img: value.img,
              img_: value.img_,
              id: i,
              width: '170rpx',
              height: '170rpx',
              img_width: '76rpx',
              img_height: '76rpx',
              font_size: '24rpx',
              top: '26rpx',
              text_top: '10rpx',
              z_index: 5,
              background: '#3db95c',
              opacity: 1,
              animation: '',
              left: 120,
              margin_top: '0',
              color: '#fff',
            }
            arr[i] = arr1
          } else if (i == 3) {
            let arr1 = {
              show_img: value.img,
              img: value.img,
              img_: value.img_,
              id: i,
              width: '140rpx',
              height: '140rpx',
              img_width: '64rpx',
              img_height: '64rpx',
              font_size: '22rpx',
              top: '20rpx',
              text_top: '4rpx',
              z_index: 4,
              background: '#E8E8E8',
              opacity: 1,
              animation: '',
              left: 195,
              margin_top: '15rpx',
              color: '#8C8C8C',
            }
            arr[i] = arr1
          } else if (i == 4) {
            let arr1 = {
              show_img: value.img,
              img: value.img,
              img_: value.img_,
              id: i,
              width: '120rpx',
              height: '120rpx',
              img_width: '56rpx',
              img_height: '56rpx',
              font_size: '20rpx',
              top: '15rpx',
              text_top: '2rpx',
              z_index: 3,
              background: '#F5F5F5',
              opacity: 1,
              animation: '',
              left: 255,
              margin_top: '25rpx',
              color: '#8C8C8C',
            }
            arr[i] = arr1
          } else {
            let arr1 = {
              show_img: value.img,
              img: value.img,
              img_: value.img_,
              id: i,
              width: '120rpx',
              height: '120rpx',
              img_width: '56rpx',
              img_height: '56rpx',
              font_size: '20rpx',
              top: '15rpx',
              text_top: '2rpx',
              z_index: 3,
              background: '#F5F5F5',
              opacity: 1,
              animation: '',
              left:0,
              margin_top: '25rpx',
              color: '#8C8C8C',
            }
            arr[i] = arr1
          }
    
        });
        this.setData({
          sy_list: arr
        })
    
        
      },

样式写好之后接下来就该写事件了

首先是排序，跟切换效果

move: function () {
        var sy_list = this.data.sy_list;
        /*图片分布*/
        for (var i = 0; i < sy_list.length; i++) {
          var data = sy_list[i];
          var animation = wx.createAnimation({
            duration: 200
          });
          animation.translateX(data.left).step();
          this.setData({
            ["sy_list[" + i + "].animation"]: animation.export(),
            ["sy_list[" + i + "].width"]: data.width,
            ["sy_list[" + i + "].height"]: data.height,
            ["sy_list[" + i + "].z_index"]: data.z_index,
            ["sy_list[" + i + "].background"]: data.background,
            ["sy_list[" + i + "].opacity"]: data.opacity,
            ["sy_list[" + i + "].margin_top"]: data.margin_top,
            ["sy_list[" + i + "].img_width"]: data.img_width,
            ["sy_list[" + i + "].img_height"]: data.img_height,
            ["sy_list[" + i + "].font_size"]: data.font_size,
            ["sy_list[" + i + "].color"]: data.color,
            ["sy_list[" + i + "].top"]: data.top,
            ["sy_list[" + i + "].text_top"]: data.text_top,
    
          })
        }
     
      },
    
      __set__: function () {
        var that = this;
        var order = that.data.order;
        var sy_list = that.data.sy_list;
        for (var i = 0; i < sy_list.length; i++) {
          that.setData({
            ["order[" + i + "]"]: sy_list[i].id
          })
        }
    
      },

然后是点击切换事件

/**点击某项 */
      choose: function (e) {
        // //console.log('点击:', e)
        this.setData({
          tab_index: e.currentTarget.dataset.index
        })
        var that = this;
        var id = e.currentTarget.dataset.id;
        var order = that.data.order;
        var index = 0;
    
        for (var i = 0; i < order.length; i++) {
          if (id == order[i]) {
            index = i;
            break;
          }
        }
    
        if (index < that.data.iCenter) {
          for (var i = 0; i < that.data.iCenter - index; i++) {
    
            this.data.sy_list.push(this.data.sy_list.shift()); //获取第一个放到最后一个
    
            this.data.order.unshift(this.data.order.pop());
            // this.right()  
          }
        } else if (index > that.data.iCenter) {
          for (var i = 0; i < index - that.data.iCenter; i++) {
            this.data.sy_list.unshift(this.data.sy_list.pop()); //获取最后一个放到第一个
            this.data.order.push(this.data.order.shift());
            // this.left();
          }
        }
        this.move();
    
      },

滑动切换事件

/**左箭头 */
      left: function () {
        let tab_index = this.data.tab_index + 1
        if (tab_index > this.data.img_arr.length - 1) {
          tab_index = 0
        }
        this.setData({
          tab_index: tab_index
        })
        var last = this.data.sy_list.pop(); //获取数组的最后一个
        this.data.sy_list.unshift(last); //放到数组的第一个
        var orderFirst = this.data.order.shift();
        this.data.order.push(orderFirst);
        this.move();
      
      },
      /** */
      right: function () {
        let tab_index = this.data.tab_index - 1
        if (tab_index < 0) {
          tab_index = this.data.img_arr.length - 1
        }
        this.setData({
          tab_index: tab_index
        })
        var first = this.data.sy_list.shift(); //获取数组的第一个
        this.data.sy_list.push(first); //放到数组的最后一个位置
        var orderLast = this.data.order.pop();
        this.data.order.unshift(orderLast);
        this.move();
    
      },
      //手指触发开始移动
      moveStart: function (e) {
        //console.log(e);
        var startX = e.changedTouches[0].pageX;
        this.setData({
          startX: startX
        });
      },
      //手指触摸后移动完成触发事件
      moveItem: function (e) {
        console.log(e);
        var that = this;
        var endX = e.changedTouches[0].pageX;
        this.setData({
          endX: endX
        });
        //计算手指触摸偏移剧距离
        var moveX = this.data.startX - this.data.endX;
        //向左移动
        if (moveX > 20) {
    
          this.left();
        }
        if (moveX < -20) {
          this.right();
        }
      },

完整dome包下载链接：[https://download.csdn.net/download/qq\_41241504/15006680][https_download.csdn.net_download_qq_41241504_15006680]

该dome包为小程序压缩包其他请根据个人需求进行修改

[20210203145157983.gif]: /images/20210724/f05f917fca1f4d688d1b12a080bcede0.png
[https_download.csdn.net_download_qq_41241504_15006680]: https://download.csdn.net/download/qq_41241504/15006680