(转)微信小程序swiper扩展左右滑动两边各显示一半其它的item

╰+哭是因爲堅強的太久メ 2022-03-21 13:38 131阅读 0赞

## **转： \[dliberty\]** ##

([https://me.csdn.net/dliberty][https_me.csdn.net_dliberty])  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjA2NDAw_size_16_color_FFFFFF_t_70]  
wxml 代码  
使用next-margin和previous-margin控制露出前后的一小部分  
外层li控制两个相邻的item之间的留白  
里层li1控制item的显示元素

wxss 代码

.li{
      width: 100%;
      height: 252rpx;
    }
    .li1{
      width: 446rpx;
      margin: 0 auto;
      border-radius: 10rpx;
      height: 252rpx;
      transform: scale(0.9);
    }
    .selected{
      transform: scale(1)
    }
    .red{
      background: red;
    }
    .blue{
      background: blue;
    }
    .green{
      background: green;
    }
    .orange{
      background: orange;
    }

js代码  
可左右滑动切换 可点击切换  
左右滑动和点击切换获取currentItemId，以控制当前选择的item及选中效果

Page({
      data: {
        backClass: ["red", "blue", "green","orange"],
        currentItemId:2
      },
      swiperChange:function(e){
        var currentItemId = e.detail.currentItemId;
        this.setData({
          currentItemId:currentItemId
        })
      },
      clickChange:function(e){
        var itemId = e.currentTarget.dataset.itemId;
        this.setData({
          currentItemId: itemId
        })
      }
    })

--------------------

作者：dliberty  
来源：CSDN  
原文：[https://blog.csdn.net/dliberty/article/details/83061047][https_blog.csdn.net_dliberty_article_details_83061047]

[https_me.csdn.net_dliberty]: https://me.csdn.net/dliberty
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjA2NDAw_size_16_color_FFFFFF_t_70]: /images/20220321/02a1fa5cca3744d48a3d97903233d455.png
[https_blog.csdn.net_dliberty_article_details_83061047]: https://blog.csdn.net/dliberty/article/details/83061047