站长百科 微信小程序swiper实现 句子控app首页滑动卡片 正文

微信小程序swiper实现 句子控app首页滑动卡片

2023-01-05,,,,

微信小程序swiper实现 句子控app首页滑动卡片

引言：最近看到句子控APP首页的效果很清新，可是发现他的微信小程序端没有实现这个功能，我看了一下难度不大，于是尝试着去实现。

实现效果如下：

1、定义一个yiyancard自定义组件，在根目录下新建一个components文件夹并在其内部新建一个yiyancard文件夹。

2、在pages文件夹下新建一个home页面

3、在home页面的json引入yiyancard组件，并在wxml中使用

index.json

{

  "usingComponents": {

    "s-yiyancard": "../../components/yiyancard/index"

  }

}

index.wxml

<view class="container">

  <s-yiyancard style="width:100vw"> </s-yiyancard>

</view>

4、编写yiyancard相关代码

index.js

Page({

  data: {

    cardCur: 0,

    swiperList: [{

      id: 0,

      type: 'image',

      url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/6.JPG?sign=39d14c3902ca802c5bbdca9487c4dfc8&t=1612537023',

      yiyan: '没有无聊的人生，只有无聊的人生态度',

      form: '刘瑜',

      iflike: "false"

    }, {

      id: 1,

      type: 'image',

      url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/1.JPG?sign=6a578b89d06a74141a01b35b26684e04&t=1612536951',

      yiyan: '没有任何一种逃避能得到赞赏，喜欢就去追，饿了就吃饭，管他是失败或是发胖',

      form: '',

      iflike: "false"

    }, {

      id: 2,

      type: 'image',

      url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/2.JPG?sign=42c68e97e5fcd277e42bdc476a94cdb4&t=1612536964',

      yiyan: '万物皆有裂痕，那是光进来的地方',

      iflike: "false"

    }, {

      id: 3,

      type: 'image',

      url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/3.JPG?sign=d607ee45937f227f8ae5fba4e9f846f4&t=1612536974',

      yiyan: '不听命于自己者，就要受命于他人',

      form: '尼采',

      iflike: "false"

    }, {

      id: 4,

      type: 'image',

      url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/4.JPG?sign=4c986f27559352bb5d9b42a96851ab22&t=1612536983',

      yiyan: '我从不曾崩溃瓦解，因为我从不曾完好无缺',

      form: '安迪·沃霍尔',

      iflike: "false"

    }, {

      id: 5,

      type: 'image',

      url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/5.JPG?sign=22d43fff1c66594770c1c2b10cd8403c&t=1612537004',

      yiyan: '总有人找你这可小星球，了解你的温柔和璀璨，即使旁边的宇宙再浪漫',

      form: '',

      iflike: "false"

    }, {

      ifend: true

    }],

  },

  onLoad() {

    this.towerSwiper('swiperList');

    // 初始化towerSwiper 传已有的数组名即可

  },

  DotStyle(e) {

    this.setData({

      DotStyle: e.detail.value

    })

  },

  // cardSwiper

  cardSwiper(e) {

    this.setData({

      cardCur: e.detail.current

    })

  },

  // towerSwiper

  // 初始化towerSwiper

  towerSwiper(name) {

    let list = this.data[name];

    for (let i = 0; i < list.length; i++) {

      list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))

      list[i].mLeft = i - parseInt(list.length / 2)

    }

    this.setData({

      swiperList: list

    })

  },

  // towerSwiper触摸开始

  towerStart(e) {

    this.setData({

      towerStart: e.touches[0].pageX

    })

  },

  // towerSwiper计算方向

  towerMove(e) {

    this.setData({

      direction: e.touches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left'

    })

  },

  // towerSwiper计算滚动

  towerEnd(e) {

    let direction = this.data.direction;

    let list = this.data.swiperList;

    if (direction == 'right') {

      let mLeft = list[0].mLeft;

      let zIndex = list[0].zIndex;

      for (let i = 1; i < list.length; i++) {

        list[i - 1].mLeft = list[i].mLeft

        list[i - 1].zIndex = list[i].zIndex

      }

      list[list.length - 1].mLeft = mLeft;

      list[list.length - 1].zIndex = zIndex;

      this.setData({

        swiperList: list

      })

    } else {

      let mLeft = list[list.length - 1].mLeft;

      let zIndex = list[list.length - 1].zIndex;

      for (let i = list.length - 1; i > 0; i--) {

        list[i].mLeft = list[i - 1].mLeft

        list[i].zIndex = list[i - 1].zIndex

      }

      list[0].mLeft = mLeft;

      list[0].zIndex = zIndex;

      this.setData({

        swiperList: list

      })

    }

  },
 // 喜欢图标点击改变

  like: function (event) {

    const that = this

    let likeid = event.currentTarget.dataset.likeid

    var a = `swiperList[${likeid}].iflike`

    var b =`that.data.swiperList[${likeid}].iflike`

    console.log(a)

    console.log(b)

    if (that.data.swiperList[likeid].iflike=== "false") {

      that.setData({

      [a] : "true",

      })

    } else if (that.data.swiperList[likeid].iflike=== "true") {

      that.setData({

        [a]: "false",

      })

    }

    console.log(that.data.swiperList[likeid].iflike)

  }

})

index.json

{

  "component": true,

  "usingComponents": {}

}
<swiper class="card-swiper " duration="500" bindchange="cardSwiper">

  <swiper-item wx:for="{{swiperList}}" wx:key class="{{cardCur==index?'cur':''}}">

    <block wx:if="{{!item.ifend}}" >

      <view class="swiper-item other ">

      <image src="{{item.url}}" mode="aspectFill" class="swiper-img"></image>

      <view class="yiyan-body">{{item.yiyan}}</view>

      <view wx:if="{{item.form}}" class="yiyan-form">- {{item.form}} -</view>

      <view wx:if="{{!item.form}}" class="zhanwei"></view>

      <view class="bottom-box">

        <view class="like juzhong" bindtap="like" data-likeid="{{item.id}}">

          <block wx:if="{{item.iflike =='false'}}">

            <image class="icon-img" src="../../images/icon/xihuan.png"></image>

          </block>

          <block wx:if="{{item.iflike =='true'}}">

            <image class="icon-img" src="../../images/icon/xihuan2.png"></image>

          </block>

          <view class="num">12k</view>

        </view>

        <view class="liuyan">

          <image class="icon-img2" src="../../images/icon/liuyan.png"></image>

          <view class="num">36</view>

        </view>

        <view class="biaoqian">

          <image class="icon-img" src="../../images/icon/biaoqian.png"></image>

        </view>

        <view class="zhuanfa">

          <image class="icon-img" src="../../images/icon/zhuanfa.png"></image>

        </view>

      </view>

    </view>

    </block>

    <block wx:if="{{item.ifend}}">

      <view class="swiper-item other juzhong">

        <view class="end-title">每日十句精选投稿</view>

        <view class="end-body">

          感谢支持，每天都有不同的收获。如果意犹未尽，可以点击底部按钮查看更多推荐

        </view>

        <view class="end-bottom"> 去发现页查看更多推荐</view>

      </view>

    </block>

  </swiper-item>

</swiper>

index.css

/* ==================

         轮播

 ==================== */

.swiper-img {

    height: 35% !important;

}

.swiper-item image,

.swiper-item video {

    width: 100%;

    display: block;

    height: 100%;

    margin: 0;

    pointer-events: none;

}

.card-swiper {

    height: 85vh !important;

}

.card-swiper swiper-item {

    width: 610rpx !important;

    left: 70rpx;

    box-sizing: border-box;

    padding: 40rpx 0rpx 70rpx;

    overflow: initial;

}

.card-swiper swiper-item .swiper-item {

    width: 100%;

    display: block;

    height: 100%;

    border-radius: 10rpx;

    transform: scale(0.9);

    transition: all 0.2s ease-in 0s;

    overflow: hidden;

}

.card-swiper swiper-item.cur .swiper-item {

    transform: none;

    transition: all 0.2s ease-in 0s;

}

swiper {

    margin-top: 15rpx !important;

}

.other {

    position: relative;

    background-color: #ffffff;

    display: flex;

    /*flex布局方法*/

    flex-direction: column;

    /*垂直布局*/

    align-items: center;

    /*水平方向居中*/

    box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);

    position: relative;

}

/* 内容 */

.yiyan-body {

    line-height: 46rpx;

    letter-spacing: 5rpx;

    margin-top: 38rpx;

    font-size: 30rpx;

    width: 90%;

    height: 35%;

    margin-left: 5%;

    color: #3e3e3e;

}

.yiyan-form {

    position: absolute;

    bottom: 55px;

    display: flex;

    flex-direction: column;

    align-items: center;

    font-size: 25rpx;

    color: #999999;

    width: 50%;

    margin-top: 20%;

    margin-left: 25%;

}

/* 底部 */

.bottom-box {

    position: absolute;

    bottom: 0px;

    width: 100%;

    height: 80rpx;

    display: flex;

    flex-direction: row;

}

.juzhong {

    display: flex;

    justify-content: center;

    align-items: center;

}

.icon-img {

    width: 30rpx !important;

    height: 30rpx !important;

}

.icon-img2 {

    width: 30rpx !important;

    height: 30rpx !important;

    /* margin-top: 5rpx !important; */

}

.like {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 27%;

}

.num {

    font-size: smaller;

    margin-top: 3rpx;

    margin-left: 6rpx;

    color: #b4b4b4;

}

.liuyan {

    width: 27%;

    display: flex;

    justify-content: center;

    align-items: center;

}

.biaoqian {

    width: 23%;

    display: flex;

    justify-content: center;

    align-items: center;

}

.zhuanfa {

    width: 23%;

    display: flex;

    justify-content: center;

    align-items: center;

}

/* 最后一页 */

.end-title{

    width: 60%;

    margin-left: 20%;

    font-size: 30rpx;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 100rpx;

    margin-bottom: 100rpx;

}

.end-body{

    width: 80%;

    margin-left: 10%;

    font-size: 27rpx;

    color: #a7a7a7;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 40rpx;

}

.end-bottom{

    position: absolute;

    width: 70%;

    left: 15%;

    bottom: 60rpx;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 40rpx;

    color: #7b9fcb;

    font-size: 28rpx;

}

编写完以上代码，相关功能就实现了。

注意：为了方便以上data中的数据是直接在js中自定义好的。

微信小程序swiper实现 句子控app首页滑动卡片的相关教程结束。

《微信小程序swiper实现 句子控app首页滑动卡片.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!