微信小程序之滚动卡片

1. 效果图

通过底部的滚动卡片改变背景图，点击卡片路由到不同小程序的页面，可用于活动的选择与海报的展示。

2. 代码分析

思路分析：用官方组件scroll-view监听卡片滑动，通过createSelectorQuery().selectAll()的API计算各个图片是否在视图中心，并改变样式。
meng-scrolle-card.js

const app = getApp()

Page({
  data: {
    imageSrc:[
      "https://write-to-me.jutu.xyz/%E4%B8%B4%E6%97%B6%E4%BD%BF%E7%94%A8/1.jpeg",
      "https://write-to-me.jutu.xyz/%E4%B8%B4%E6%97%B6%E4%BD%BF%E7%94%A8/2.jpeg",
      "https://write-to-me.jutu.xyz/%E4%B8%B4%E6%97%B6%E4%BD%BF%E7%94%A8/3.jpeg",
      "https://write-to-me.jutu.xyz/%E4%B8%B4%E6%97%B6%E4%BD%BF%E7%94%A8/4.jpeg"
    ],
    //图片数量，用于计算容器宽度
    scrollItemNumber:0,
    // 当前高亮的图片序号
    nowImage:0,
    // 获取屏幕的宽度
    screenWidth:'',
    // 完成加载的图片数量
    imageLoadNumber:0,
  },
  // 滑动行为监听
  scrollHandle(scrollParameter){
    var _this=this;
    _this.createSelectorQuery().selectAll(".msc-common-image").
      boundingClientRect(
        (res)=>{
         console.log(res);
         var halfWidth=_this.data.screenWidth/2
         for (var i=0;i<res.length;i++) {
           if(res[i].left<0||res[i].right>_this.data.screenWidth){
             continue;
           }
           if(res[i].left<halfWidth&&res[i].right>halfWidth){
             _this.setData({
               nowImage:i,
             })
             console.log("已设置屏幕中心图片，图片编号",_this.data.nowImage);
             return;
           }
        }
   }).exec();
  },
  // 图片加载进度监听
  imageLoadHandle(){
    var _this=this;
    console.log("图片已加载数量："+_this.data.imageLoadNumber);
    this.setData({
      imageLoadNumber:++_this.data.imageLoadNumber
    })
    if(_this.data.imageLoadNumber===_this.data.imageSrc.length){
      console.log("写信页面加载完成，过渡效果已关闭")
      //此处可关闭过渡效果
      wx.showToast({
        title: '点击底部卡片以选择',
        icon:"none",
        duration:3000,
      })
    }
  },
  clickCard(even){
    let index=even.currentTarget.dataset.id;
    console.log("用户点击卡片编号："+index);
    switch(index){
      case 0:
        // 此处可跳转
        // wx.navigateTo({
        //   url: 'xxx',
        //   success:function(){}
        // });
        break;
      case 1:
        // 此处可跳转
        // wx.navigateTo({
        //   url: '/pages/saveAsPicture/saveAsPicture',
        //   fail:function(){
        //     wx.showToast({
        //       title: '跳转失败，稍后再试',
        //     })
        //   }
        // });
        break; 
      case 2:
        // 此处可跳转
        // wx.navigateTo({
        //   url: 'xxx',
        //   fail:function(){
        //     wx.showToast({
        //       title: '跳转失败，稍后再试',
        //     })
        //   }
        // });
        break; 
      case 3:
        // 此处可跳转
        // wx.navigateTo({
        //   url: 'xxx',
        //   fail:function(){
        //     wx.showToast({
        //       title: '跳转失败，稍后再试',
        //     })
        //   }
        // });
        break; 
    }
  },
  onLoad() {
    var _this=this;
    // 在组件实例进入页面节点树时获取屏幕参数
    wx.getSystemInfo({
      success(res){
		// 此处可打开过渡效果
        _this.setData({
          scrollItemNumber:_this.data.imageSrc.length,
          screenWidth:res.windowWidth,
        })
        console.log('获取到宽度：'+res.windowWidth);
      },
      fail(res){
        console.log("调用失败！无法获取屏幕的宽度。");
      },
    })
  },
})

meng-scrolle-card.wxml

<!-- 滚动卡片 -->
<view class="msc-mask-layer" style="background-image: url({{imageSrc[nowImage]}});">
  <view class="msc-image-container">
    <scroll-view  class="msc-scroll-container" scroll-x="true" bindscroll="scrollHandle" >
      <view style="width:{{(scrollItemNumber+2)*40}}vw;height:100%">
        <block wx:for="{{imageSrc}}" wx:for-item="item" wx:key="index" >
          <image src="{{item}}" class="{{index===nowImage?'msc-now-image':''}} msc-common-image"
           id="image-{{index}}" bindload="imageLoadHandle" bindtap="clickCard"></image>
        </block>
      </view>
    </scroll-view>
  </view>
</view>

3. Other

完整代码请前往码云Gitee