先送上效果图，可手势左右滑动
<!--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 () {
}
})
如有做的不好，日后再谈！
只想做个退休老人，年轻的我走快点吧！