【黄啊码】微信小程序弹窗图片滚动

废话不多说，上例子！

这是效果图：

代码：丢这了，给我抄！！！ 抄了还不行，爬到楼上找我，等你

  

   

    

     

    
    

     

      <view class="modal-box" hidden="{{flag}}" bindtap="hide">
     
    
   

    

     

    
    

     
      <view class="modal-content">
     
    
   

    

     

    
    

     
        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}">
     
    
   

    

     

    
    

     
           <block wx:for="{{other.guide_imgs}}" wx:key="{{index}}">
     
    
   

    

     

    
    

     
              <swiper-item>
     
    
   

    

     

    
    

     
                 <image src="{{item}}" mode="aspectFill" />
     
    
   

    

     

    
    

     
              </swiper-item>
     
    
   

    

     

    
    

     
           </block>
     
    
   

    

     

    
    

     
        </swiper>
     
    
   

    

     

    
    

     
      </view>
     
    
   

    

     

    
    

     
      <view>
     
    
   

    

     

    
    

     
      </view>
     
    
   

    

     

    
    

     
 </view>
     
    
  
 

  

   

    

     

    
    

     

      data:{
     
    
   

    

     

    
    

     
    imgUrls: [],
     
    
   

    

     

    
    

     
    indicatorDots: true,
     
    
   

    

     

    
    

     
    autoplay: false,
     
    
   

    

     

    
    

     
    interval: 3000,
     
    
   

    

     

    
    

     
    duration: 800,
     
    
   

    

     

    
    

     
    flag: true,
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      openDetail: function () {
     
    
   

    

     

    
    

     
    this.setData({ flag: false })
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

      hide: function () {
     
    
   

    

     

    
    

     
    this.setData({ flag: true })
     
    
   

    

     

    
    

     

      },
     
    
  
 

  

   

    

     

    
    

     

      .modal-box{
     
    
   

    

     

    
    

     
  position:fixed;
     
    
   

    

     

    
    

     
  background:rgba(0,0,0,0.4);
     
    
   

    

     

    
    

     
  top:0rpx;
     
    
   

    

     

    
    

     
  width:100%;
     
    
   

    

     

    
    

     
  height:100%;
     
    
   

    

     

    
    

     
  z-index:1;
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      .modal-content{
     
    
   

    

     

    
    

     
  margin-top:200rpx;
     
    
   

    

     

    
    

     
  height:700rpx;
     
    
   

    

     

    
    

     
  border-radius: 10rpx;
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      swiper {
     
    
   

    

     

    
    

     
  width:100%;
     
    
   

    

     

    
    

     
  height:700rpx;
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      .modal-content image{
     
    
   

    

     

    
    

     
  width: 90%;
     
    
   

    

     

    
    

     
  height: 100%;
     
    
   

    

     

    
    

     
  border-radius: 5rpx;
     
    
   

    

     

    
    

     
  margin-left:35rpx;
     
    
   

    

     

    
    

     

      }
     
    
  
 

文章来源: markwcm.blog.csdn.net，作者：黄啊码，版权归原作者所有，如需转载，请联系作者。

原文链接：markwcm.blog.csdn.net/article/details/121210662