微信小程序图片左右滑动 swiper

微信小程序实现图片左右滑动点击切换

效果图
结构部分

<view class="swiperItem1"><view class="workTitle">请您添加中石油服务经理企业微信</view><view class="workTitle">参与活动</view><view class="workSubTitle">添加操作</view><view class="workClickBelow">点击下方“立即添加”按钮</view><view class="workClickBelowBtn" bindtap="jumpWorkWechatFuc"></view></view><view class="swiper-box" style="display: {{workerdisplay}}"><swiper current="{{currentNum}}" bindchange='onChange' class="swiper-item"><swiper-item bindtap="change" data-id="1" ><view class="swiper-item_box"><!-- <image src="https://static.sprucesmart.com/hainanapp/firstStep1-min.png"></image> --><image src="https://static.sprucesmart.com/hainanapp/firstStep2-min.png"></image></view></swiper-item><swiper-item bindtap="change" data-id="2" ><view class="swiper-item_box"><!-- <image src="https://static.sprucesmart.com/hainanapp/secondSteps1-min.png"></image> --><image src="https://static.sprucesmart.com/hainanapp/secondSteps2-min.png"></image></view></swiper-item></swiper></view><view class="closeWorkToast" bindtap="closeworkerpopFuc"></view>

样式

swiper {/* height: 750rpx; */display: flex;flex-flow: column;align-items: center;z-index: 99999999;
}
.swiperItem1 {width: 570rpx;height: 780rpx;background: url(https://static.sprucesmart.com/hainanapp/workshowbg3-min.png)no-repeat center;background-size: 100% 100%;padding-top: 30rpx;box-sizing: border-box;position: absolute;z-index: 9;top: 276rpx;left: 90rpx;
}.swiper-box {width: 570rpx;height: 366rpx;position: absolute;z-index: 9;top: 657rpx;left: 91rpx;
}
.swiper-img {width: 570rpx;height: 750rpx;
}.swiper-img-active1 {width: 570rpx;height: 750rpx;background: url(https://static.sprucesmart.com/hainanapp/workshowbg1-min.png)no-repeat center;background-size: 100% 100%;padding-top: 30rpx;box-sizing: border-box;
}.workTitle {font-size: 32rpx;font-family: Alibaba PuHuiTi;font-weight: bold;color: #ffffff;text-shadow: 0rpx 2rpx 0rpx #ac4801;text-align: center;
}
.workSubTitle {font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #ffffff;text-align: center;
}.workClickBelow {font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #2c3f53;text-align: center;margin-top: 66rpx;
}
.workClickBelowBtn {width: 409rpx;height: 74rpx;background: url(https://static.sprucesmart.com/hainanapp/workClickBelowBtn-min.png)no-repeat center;background-size: 100% 100%;text-align: center;margin: 17rpx auto 0;
}
.firstStep {width: 116rpx;height: 38rpx;background: url(https://static.sprucesmart.com/hainanapp/firstStep-min.png)no-repeat center;background-size: 100% 100%;margin: 0 227rpx;
}
.secondStep {width: 116rpx;height: 38rpx;background: url(https://static.sprucesmart.com/%20hainanapp/secondStep-min.png)no-repeat center;background-size: 100% 100%;margin: 0 227rpx;
}
.eWTltle {font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #2c3f53;line-height: 30px;margin: 0 auto 38rpx;text-align: center;
}
.closeWorkToast {width: 60rpx;height: 60rpx;background: url(https://static.sprucesmart.com/hbMayDay/closeicon.png);background-size: 100% 100%;position: absolute;/* left: 246rpx;top: 800rpx; */color: #fff;left: 343rpx;top: 1100rpx;z-index: 9999999999;
}
.swiperItem2 {width: 570rpx;height: 750rpx;background: url(https://static.sprucesmart.com/hainanapp/workshowbg2-min.png)no-repeat center;background-size: 100% 100%;padding-top: 30rpx;box-sizing: border-box;
}
.swiper-item_box {width: 100%;height: 100%;margin-left: 5rpx;border: none;/* width: 559rpx;height: 333rpx; */
}
.swiper-item_box image {width: 100%;height: 100%;
}.swiper-item {width: 570rpx !important;height: 366rpx !important;
}

js部分

data: {currentNum: 0
},// 监听轮播onChange(e) {this.setData({currentNum: e.detail.current,})},change(e) {var id = e.currentTarget.dataset.id;if (id == 1) {this.setData({currentNum: 1,})} else {this.setData({currentNum: 0,})}},

图片整体滑动

- 结构<view class="swiper-box" style="display: {{workerdisplay}}"><swiper current="{{currentNum}}" bindchange='onChange'><swiper-item bindtap="change" data-id="1"><view class="swiperItem1"><view class="workTitle">请您添加中石油服务经理企业微信</view><view class="workTitle">参与活动</view><view class="workSubTitle">添加操作</view><view class="workClickBelow">点击下方“立即添加”按钮</view><view class="workClickBelowBtn"></view><view class="firstStep"></view><view class="eWTltle">在页面中长按识别二维码添加企业微信</view></view></swiper-item><swiper-item bindtap="change" data-id="2"><view class="swiperItem2"><view class="workTitle">请您添加中石油服务经理企业微信</view><view class="workTitle">参与活动</view><view class="workSubTitle">添加操作</view><view class="workClickBelow">点击下方“立即添加”按钮</view><view class="workClickBelowBtn" ></view><view class="firstStep"></view><view class="eWTltle">在页面中长按识别二维码添加企业微信</view></view></swiper-item></swiper><view class="closeWorkToast" bindtap="closeworkerpopFuc"></view></view>
-样式
/* 添加站经理弹窗 */
swiper {height: 750rpx;display: flex;flex-flow: column;align-items: center;z-index: 99999999;
}
.swiperItem1 {width: 570rpx;height: 750rpx;background: url(https://static.sprucesmart.com/hainanapp/workshowbg1-min.png)no-repeat center;background-size: 100% 100%;padding-top: 30rpx;box-sizing: border-box;
}.swiper-box {width: 100%;/* height: 100%; */position: absolute;z-index: 9;top: 276rpx;left: 90rpx;
}
.swiper-img {width: 570rpx;height: 750rpx;
}.swiper-img-active1 {width: 570rpx;height: 750rpx;background: url(https://static.sprucesmart.com/hainanapp/workshowbg1-min.png)no-repeat center;background-size: 100% 100%;padding-top: 30rpx;box-sizing: border-box;
}.workTitle {font-size: 32rpx;font-family: Alibaba PuHuiTi;font-weight: bold;color: #ffffff;text-shadow: 0rpx 2rpx 0rpx #ac4801;text-align: center;
}
.workSubTitle {font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #ffffff;text-align: center;
}.workClickBelow {font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #2c3f53;text-align: center;margin-top: 66rpx;
}
.workClickBelowBtn {width: 409rpx;height: 74rpx;background: url(https://static.sprucesmart.com/hainanapp/workClickBelowBtn-min.png)no-repeat center;background-size: 100% 100%;text-align: center;margin: 17rpx auto 56rpx;
}
.firstStep {width: 116rpx;height: 38rpx;background: url(https://static.sprucesmart.com/hainanapp/firstStep-min.png)no-repeat center;background-size: 100% 100%;margin: 0 227rpx;
}
.eWTltle {font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #2c3f53;line-height: 30px;margin: 0 57rpx 10rpx 38rpx;text-align: center;
}
.closeWorkToast {width: 60rpx;height: 60rpx;background: url(https://static.sprucesmart.com/hbMayDay/closeicon.png);background-size: 100% 100%;position: absolute;left: 246rpx;top: 800rpx;color: #fff;
}
.swiperItem2 {width: 570rpx;height: 750rpx;background: url(https://static.sprucesmart.com/hainanapp/workshowbg2-min.png)no-repeat center;background-size: 100% 100%;padding-top: 30rpx;box-sizing: border-box;
}

微信小程序图片左右滑动 swiper相关推荐

微信小程序利用scroll-view和swiper实现图片滚动切换
微信小程序利用scroll-view和swiper实现图片滚动切换 <view class="starbox"><view class="starare ...
微信小程序图片轮转播放
微信小程序图片轮播步骤一:创建项目,注意创建的路径,路径中涉及到的文件最好用英文命名. 这里将项目创建在D:\SotfWare\WechatPG\test1.test1是项目的文件名.创建结束之后, ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
微信小程序图片（头像）裁剪工具we-cropper含2d版-完整版
微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版本教程基于 we-cropper v1.4.0,非本人同意禁止任何形的转载 we-cropper官方下载链接效果图一.非2d版 ...

微信小程序图片左右滑动 swiper

微信小程序实现图片左右滑动点击切换

图片整体滑动

微信小程序图片左右滑动 swiper相关推荐

最新文章

热门文章

微信小程序 图片左右滑动 swiper

微信小程序 实现图片左右滑动 点击切换

图片整体滑动

微信小程序 图片左右滑动 swiper相关推荐

最新文章

热门文章

微信小程序图片左右滑动 swiper

微信小程序实现图片左右滑动点击切换

微信小程序图片左右滑动 swiper相关推荐