小程序画布轮播

先送上效果图，可手势左右滑动

 

<!--wxml页面-->

 

 <view bindtap="changeYL">点击分享</view>


<!--弹出页面代码-->
 <view class="modal-mask1" bindtap="hideModal"  wx:if="{{showModal}}"></view>
<view class="modal-dialog1" wx:if="{{showModal}}">

    <view class='swiper'>
        <swiper indicator-dots="{{false}}" autoplay="{{false}}" circular="true" previous-margin="{{'140rpx'}}" next-margin="{{'140rpx'}}" bindchange="swiperChange">
          <block wx:for="{{imgUrls}}" wx:key="{{index}}">
            <swiper-item>
               <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/>  

               <!-- <canvas canvas-id="mycanvas" class="canvas"></canvas>  -->

            </swiper-item>
          </block>
        </swiper>
    </view>
  
  <view class="model-services1">
    <view class="sharehy">
        <button open-type='share'class="sharehy_weixin" plain="true">
            <image src="https://xcx.hy720.com/wtt/weiixn2.png"></image>
            <view class="cube-text">
              <text>分享好友</text>
            </view>
        </button>
        <button class="sharehy_weixin" bindtap='baocun'>
          <image src="https://xcx.hy720.com/wtt/xiazai1.png"></image>
          <view class="cube-text">
            <text>保存图片</text>
          </view>
        </button>
    </view>
  </view>
</view> 

<!--css代码-->

 .modal-mask1 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  z-index: 1000;
}
 
.modal-dialog1 {
  overflow: hidden;
  position: fixed;
  z-index: 1000;
  top: 120rpx;


} 
/* .view-image1{
  width: 500rpx;
  height: 750rpx;
  z-index: 1000;
  display: block; 
} */
 .model-services1 {
    width: 100%;
    position: fixed;
    background-color: #fff;
    bottom: 0;
    z-index: 1000;
    height: 220rpx;
    border-radius: 30rpx 30rpx 0rpx 0rpx ;
    left: 0rpx;
}
.model-services1 .sharehy{width: 500rpx;height: 200rpx; margin: 0 auto;display: flex;flex-wrap: wrap;padding-top: 30rpx;margin-bottom: 10rpx;}
.model-services1 .sharehy_weixin{width: 170rpx;height: 180rpx;text-align: center;background-color: #fff;}
.model-services1 image{width: 100%;height: 110rpx;padding-bottom: 15rpx;max-width: 110rpx;}
.model-services1 .cube-text {
    position: relative;
    width: 120rpx;
    height: 30rpx;
    line-height: 30rpx;
    color: #000;
    margin-top: -30rpx;
    font-size: 28rpx;
} 
/*弹出页面样式*/


.swiper{
  width: 750rpx;
  height: 900rpx;
  z-index: 1000;
   display: block; 
  }
.swiper swiper{
  width: 750rpx;
  height: 900rpx;
}
.swiper swiper-item{
  padding-top: 80rpx;
}
.swiper swiper image{
  width: 375rpx;
  height: 667rpx;
  position: absolute;
  left: 50%;
  margin-left: -188rpx;
} 

image.active{
  transform: scale(1.14);
  transition:all .2s ease-in 0s;
}

.canvas {
  position: absolute !important;
  display: block !important;
  width: 450rpx;
  height: 667rpx;
  background: #FF7A04;
  z-index: 100;
  
}

<!--js代码-->

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'https://xcx.hy720.com/wtt/haibao3.jpg',
      'https://xcx.hy720.com/wtt/haibao3.jpg',
      'https://xcx.hy720.com/wtt/haibao3.jpg'
    ],
    swiperIndex: 0
    
  },
  swiperChange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  //弹出页面
  changeYL: function () {
    this.setData({
      showModal: true
    })
  },
  hideModal: function () {
    this.setData({
      showModal: false
    });
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

 

只想做个退休老人，年轻的我走快点吧！