此功能的实现,跟滑动切换栏原理一样,简单实用,先看看效果吧!
实用scroll-view组件的属性scroll-scroll-left来判断控制、
wxml结构
<view class='invite-friend'>
<view class='invite-head'>
<view class='inv-card'>
<view class='pic'>
<image class='img' mode='scaleToFill' src='{{cardImgSrc}}' />
</view>
<view class='info'>
<view class='u-name'>我是<label class='n'>麦兜先生</label></view>
<view class='u-des'>邀请你和我一起学习!</view>
<view class='pp'>长按二维码,开启你的创业学习之路></view>
<image class='ewm-img' src='https://p.ssl.qhimg.com/d/inn/0444533a/Snip20160525_6.png' />
</view>
</view>
<view class='inv-tip'>点击上方图片保存并发送到朋友圈</view>
<view class='share-btn' style="background-image:url('{{img_url}}/invite-share-btn.png')"></view>
</view>
<view class='invite-modle'>
<scroll-view scroll-x="true" class="poster-mod" scroll-left="{{scrollLeft}}">
<block wx:for="{{cardArr}}" wx:key="key" wx:for-index="key" wx:for-item="v">
<view class="poster-item {{currentTab==key?'cur':''}}" >
<image class='img' mode="widthFix" data-current="{{key}}" src='{{v.img}}' data-id="{{v.id}}" data-src="{{v.img}}"
bindtap="swichNav" >
</image>
</view>
</block>
</scroll-view>
</view>
</view>
wxss样式
page{ background-color: #f5f5f5; height: 100%; min-height: 100%;}
.invite-friend{ width: 100%; height: 100%;}
.invite-head{ width: 100%; height: 965rpx; background-color: #f5f5f5; position: relative;}
.invite-head .share-btn{ width: 114rpx; height: 60rpx; background-repeat: no-repeat; background-size: cover;
position: absolute; right: 0; bottom: 38rpx; }
.inv-card{ width: 400rpx; height: 690rpx; background-color: #fff;overflow: hidden;
position: absolute; left: 50%; transform: translateX(-50%); top: 80rpx;}
.inv-card .pic{ width: 100%; height: 570rpx; }
.inv-card .pic .img{ width: 100%; height: 100%; display: inline-block;}
.inv-card .info{ width: 100%; height: 120rpx; padding: 15rpx 0 0 15rpx; box-sizing: border-box;
background-color: #fff; position: relative;}
.inv-card .info .u-name{ color: #333; font-size: 24rpx;}
.inv-card .info .u-des{ color: #333; font-size: 22rpx; margin-top: 2rpx; }
.inv-card .info .pp{ color: #999; font-size:16rpx; margin-top: 5rpx;}
.inv-card .info .ewm-img{ width: 80rpx; height: 80rpx; position: absolute; right: 10rpx; bottom: 20rpx;}
.inv-tip{ width: 100%; text-align: center;color: #333; font-size: 24rpx; position: absolute; bottom: 135rpx;}
.invite-modle{ width: 100%; height: 240rpx; background-color:#fff; box-shadow:0,0,0 rgba(170,170,170, .38);
padding: 48rpx 0 0 28rpx; box-sizing: border-box; position: fixed; bottom: 0; left: 0;}
.poster-mod{ width: 100%; height: 150rpx; overflow: hidden; background: #fff; white-space: nowrap;}
.poster-item{ height: 144rpx; border-radius: 6rpx; border:1.5px solid transparent; display: inline-block;
overflow: hidden; margin-right: 35rpx;}
.poster-item.cur{ border-color: #ff614a;}
.poster-item .img{ width: 144rpx; height: 144rpx;}
js代码
//获取应用实例
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
img_url: '../images', //图片地址
// 卡片模块:
currentTab: 0, //预设当前项的值
scrollLeft: 0, //切换栏的滚动条位置
cardImgSrc: '', //存储卡片图
//卡片数组
cardArr: [{
id: '01',
img:'https://sjbz-fd.zol-img.com.cn/t_s320x510c/g5/M00/0F/06/ChMkJltRVImIW2zlAAHXjFLKAuwAAp4IwJkrCwAAdek616.jpg'
},
{
id: '02',
img: 'https://sjbz-fd.zol-img.com.cn/t_s320x510c/g5/M00/0F/06/ChMkJ1tRVIyIQrBRAAGd-mPfORQAAp4IwJ7S8oAAZ4S405.jpg'
},
{
id: '03',
img: 'https://sjbz-fd.zol-img.com.cn/t_s320x510c/g5/M00/0F/06/ChMkJ1tRVIyIFCYzAALE_K5nOeUAAp4IwJ3ieUAAsUU601.jpg'
},
{
id: '04',
img: 'https://sjbz-fd.zol-img.com.cn/t_s320x510c/g5/M00/0F/06/ChMkJ1tRVIuIZ3lMAAF25lP1lrcAAp4IwJvtbwAAXb-774.jpg'
},
{
id: '05',
img: 'https://sjbz-fd.zol-img.com.cn/t_s320x510c/g5/M00/0F/06/ChMkJ1tRVIuIIywCAAFsGkgldiMAAp4IwJqL9kAAWwy219.jpg'
},
{
id: '06',
img: 'https://sjbz-fd.zol-img.com.cn/t_s320x510c/g5/M00/0F/06/ChMkJ1tRVImIeKV-AAHbYF_NgJQAAp4IwJi0LQAAdt4390.jpg'
},
],
},
// 点击切换当前页时改变样式
swichNav: function (e) {
var that = this,
cur = e.target.dataset.current,
src = e.target.dataset.src;
if (that.data.currentTaB == cur) {
return false;
} else {
that.setData({
currentTab: cur
})
}
that.setData({
cardImgSrc: src
})
that.checkCor();
},
//判断当前滚动超过一屏时
checkCor: function (e) {
var that = this;
if (that.data.currentTab > 2) {
that.setData({
scrollLeft: 300
})
} else {
that.setData({
scrollLeft: 0
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//卡片默认显示第一张
var that = this,
cardImgSrc = that.data.cardImgSrc,
defaultCardImgSrc = that.data.cardArr[0].img;
that.setData({
cardImgSrc: defaultCardImgSrc
})
},
})
源码会持续更新到公众号,需要可以关注一下哦…