微信小程序，实现图片/选项滑动切换效果scroll-view

此功能的实现，跟滑动切换栏原理一样，简单实用，先看看效果吧！

实用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
    })

  },

})

• 如果亲们发现还有更简洁的方法，欢迎评论哦！