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

举报
黄啊码 发表于 2022/06/28 23:29:13 2022/06/28
【摘要】 废话不多说,上例子! 这是效果图: 代码:丢这了,给我抄!!! 抄了还不行,爬到楼上找我,等你 <view class="modal-box" hidden="{{flag}}" bindtap="hide"> <view class="modal-content"> &lt...

废话不多说,上例子!

这是效果图:

代码:丢这了,给我抄!!! 抄了还不行,爬到楼上找我,等你


      <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

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。