在微信小程序中实现左右滑动切换图片并且加遮罩层实现代码

最新推荐文章于 2023-10-13 15:37:20 发布

西瓜爱夏天️

最新推荐文章于 2023-10-13 15:37:20 发布

阅读量1.2k

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/yhs131_/article/details/109164150

版权

本文介绍了在微信小程序中如何实现左右滑动切换图片，并结合遮罩层来增强用户体验。关键步骤包括正确布局以及在onload中调用必要的函数。

摘要由CSDN通过智能技术生成

在微信小程序中实现左右滑动切换图片并且加遮罩层思路以及实现代码

布局：


```html
<view class="imgsCon"  bindtouchend="moveItem" bindtouchstart="moveStart">
      <block wx:for="{
  {newEast}}" wx:key="{
  {index}}">
          <image class="single" src="../../images/card.jpg" style="transform: translateX({
  {item.slateX}}) scale({
  {item.scale}});z-index:{
  {item.zIndex}};transform-origin: 100% 50% 0;{
  {item.style}}"/>
          <view class="mask" src="../../images/card.jpg" style="opacity:{
  {item.opacity}};transform: translateX({
  {item.slateX}}) scale({
  {item.scale}});z-index:{
  {item.zIndex}};transform-origin: 100% 50% 0;{
  {item.style}}"></view>
      </block>
    </view>

## 样式：

```css
.imgsCon{
  width: 100%;
  position: relative;
}
.single,.mask{
  transition: all 1s;
  overflow: hidden;
  margin-top: 15px;
  width: calc(100% - 100px);
  height: calc(100vh - 400px);
  position: absolute;
  transform: translateX(400px) scale(0.8);
  transform-origin:100% 50% 0;
  opacity: 1;
  /* box-shadow: 3px 3px 10px 0px #777777; */
}
.mask{
  opacity: 0.8;
  background-color: grey;
}
page{
  background: #f7f7f7f7;
 }
 .imageContainer{
  width: 100%;
  height: 500rpx;
  background: #000;
 }
 .item{
  height: 500rpx;
 }
 .itemImg{
  position: absolute;
  width: 100%;
  height: 380rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
 }
 .active{
  opacity: 1;
  z-index: 10;
  height: 430rpx;
  top: 7%;
  transition:all .2s ease-in 0s;
 }
.mask:nth-of-type(1){
  position: absolute;
  transform: translateX(0) scale(1);
  transform-origin:100% 50% 0;
  opacity: 0;
  z-index: 100;
}
.mask:nth-of-type(2){
  position: absolute;
  transform: translateX(50px) scale(0.9);
  transform-origin:100% 50% 0;
  opacity: 0.6;
  top: 0;
  z-index: 10;
}
.mask:nth-of-type(3){
  position: absolute;
  transform: translateX(105px) scale(0.8);
  transform-origin:100% 50% 0;
  opacity: 0.6;
  top: 0;
  z-index: 0;
}
.imgsCon .single:nth-of-type(1){
  position: absolute;
  transform: translateX(0) scale(1);
  transform-origin:100% 50% 0;
  opacity: 1;
  z-index: 50;
}
.imgsCon .single:nth-of-type(2){
  position: absolute;
  transform: translateX(50px) scale(0.9);
  transform-origin:100% 50% 0;
  opacity: 1;
  top: 0;
  z-index: 5;
}
.imgsCon .single:nth-of-type(3){
  position: absolute;
  transform: translateX(105px) scale(0.8);
  transform-origin:100% 50% 0;
  opacity: 1;
  top: 0;
  z-index: -5;
}

 xinlist:[
      {
   
        text:'111111'
      },
      {
   
        text:'2222'
      },
      {
   
        text:'3333'
      },
      {
   
        text:'4444'
      },
      {
   
        text:'5555uuuuuuu'
      },
      {
   
        text