小程序弹出悬浮窗并实现图片滑动解决方案

最新推荐文章于 2024-08-22 01:28:37 发布

concealed0

最新推荐文章于 2024-08-22 01:28:37 发布

阅读量6.6k

点赞数 2

本文链接：https://blog.csdn.net/concealed0/article/details/80788952

版权

.js

data: {
    imgUrls: [
      '/images/sucai/b1.jpg',
      '/images/sucai/b2.jpg',
      '/images/sucai/b3.jpg'
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 3000,
    duration: 800,
    flag: true,
  },

show: function () {

    this.setData({ flag: false })

  },
  //消失

  hide: function () {

    this.setData({ flag: true })

  },

.wxml

//触发弹出层：bindtap="show"
 <view class="fenxiang-box">
    <image bindtap="show" src="/images/sucai/b1.jpg" class="fenxiang-btn"></image>
  </view>
//弹出层内容，其中的“我知道”中绑定让弹出层消失的函数：bindtap="hide"
<view class="modal-box" hidden="{{flag}}" bindtap="hide">
      <view class="modal-content">
        <swiper indicator-dots="true" autoplay="{{false}}"autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
           <block wx:for="{{imgUrls}}" wx:key="{{index}}">
              <swiper-item>
                 <image src="{{item}}"/>
              </swiper-item>
           </block>
        </swiper>
      </view>
      <view>
       <button class="knowBtn" bindtap="hide">我知道了</button>
      </view>
 </view>

.wxss

/* pages/anli/anli.wxss */
.modal-box{
  position:fixed;
  background:rgba(0,0,0,0.4);
  top:0rpx;
  width:100%;
  height:100%;
  }
.modal-content{
  margin-top:150rpx;
  height:600rpx;
  border-radius: 10rpx;
  }
swiper {
    height: 600rpx;
}
.modal-content image{
  margin-left:75rpx;
  width: 600rpx;
  height: 100%;
}
.knowBtn{
  height:100rpx;
  width: 600rpx;
}

本次解决方案采取了触摸解决方案，在js文件中设置了shou和hide触发事件进行调控弹窗

实现界面如下：