zoukankan      html  css  js  c++  java
  • 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序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="100vw"> </s-yiyancard>
    </view>

    4、编写yiyancard相关代码

    index.js

    Page({
      lifetimes: {
        attached: function () {
          this.setData({
            cardCur: 0
          })
        },
        detached: function () {
          // 在组件实例被从页面节点树移除时执行
        },
      },
      pageLifetimes: {
        show: function () {
          this.setData({
            cardCur: 0
          })
        },
      },
      data: {
    
        cardCur: 0,
        swiperList: [ {id: 0,
          type: 'image',
          yiyan: '没有无聊的人生,只有无聊的人生态度',
          form: '刘瑜',
          tag: "励志鸡汤句子",
          liuyannum: "36",
          likenum: "2k",
    
          iflike:"false"
    
        }, {
          id: 1,
          type: 'image',
          url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/1.JPG?sign=6a578b89d06a74141a01b35b26684e04&t=1612536951',
          yiyan: '没有任何一种逃避能得到赞赏,喜欢就去追,饿了就吃饭,管他是失败或是发胖',
          form: '',
          likenum: "17K",
          liuyannum: "126",
          iflike:"false"
    
        }, {
          id: 2,
          type: 'image',
          url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/2.JPG?sign=42c68e97e5fcd277e42bdc476a94cdb4&t=1612536964',
          yiyan: '万物皆有裂痕,那是光进来的地方',
          tag: "励志",
          likenum: "11K",
          liuyannum: "31",
          iflike:"false"
    
        }, {
          id: 3,
          type: 'image',
          url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/3.JPG?sign=d607ee45937f227f8ae5fba4e9f846f4&t=1612536974',
          yiyan: '不听命于自己者,就要受命于他人',
    
          form: '尼采',
          likenum: "1.0K",
          liuyannum: "112",
          iflike:"false"
    
        }, {
          id: 4,
          type: 'image',
          url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/4.JPG?sign=4c986f27559352bb5d9b42a96851ab22&t=1612536983',
          yiyan: '我从不曾崩溃瓦解,因为我从不曾完好无缺',
    
          form: '安迪·沃霍尔',
          likenum: "967",
          liuyannum: "30",
          iflike:"false"
    
        }, {
          id: 5,
          type: 'image',
          url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/5.JPG?sign=22d43fff1c66594770c1c2b10cd8403c&t=1612537004',
          yiyan: '总有人找你这可小星球,了解你的温柔和璀璨,即使旁边的宇宙再浪漫',
          form: '',
          likenum: "19k",
          liuyannum: "1514",
          iflike:"false"
    
        }, {
          id: 5,
          type: 'image',
          url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/5.JPG?sign=22d43fff1c66594770c1c2b10cd8403c&t=1612537004',
          yiyan: '总有人找你这可小星球,了解你的温柔和璀璨,即使旁边的宇宙再浪漫',
          form: '',
          likenum: "11k",
          liuyannum: "1136",
          iflike:"false"
    
        }, {
          id: 5,
          type: 'image',
          url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/5.JPG?sign=22d43fff1c66594770c1c2b10cd8403c&t=1612537004',
          yiyan: '总有人找你这可小星球,了解你的温柔和璀璨,即使旁边的宇宙再浪漫',
          form: '',
          likenum: "12K",
          liuyannum: "306",
          iflike:"false"
    
        }, {
          id: 6,
          type: 'image',
    
          yiyan: '总有人找你这可小星球,了解你的温柔和璀璨,即使旁边的宇宙再浪漫',
          form: '',
          likenum: "11K",
          liuyannum: "391",
          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": {}
    }
    

    index.wxss

    <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">{{item.likenum}}</view>
            </view>
            <view class="liuyan">
              <image class="icon-img2" src="../../images/icon/liuyan.png"></image>
              <view class="num">{{item.liuyannum}}</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中自定义好的。关于动态改变喜欢图标详情参见上一篇随笔。

  • 相关阅读:
    PHP $_SERVER['HTTP_REFERER'] 获取前一页面的 URL 地址
    LAMP与LNMP架构的区别及其具体的选择说明
    LNMP 与 LAMP 架构的区别及配置解决方案
    LAMP和LNMP,你更愿意选择谁,为什么?
    Storm流计算从入门到精通之技术篇(高并发策略、批处理事务、Trident精解、运维监控、企业场景)
    Zookeeper从入门到精通(开发详解,案例实战,Web界面监控)
    基于Greenplum Hadoop分布式平台的大数据解决方案及商业应用案例剖析
    深入浅出Hive企业级架构优化、Hive Sql优化、压缩和分布式缓存(企业Hadoop应用核心产品)
    深入浅出OpenStack云计算平台管理(nova-compute/network)
    玩转大数据:深入浅出大数据挖掘技术(Apriori算法、Tanagra工具、决策树)
  • 原文地址:https://www.cnblogs.com/mrkr/p/14394116.html
Copyright © 2011-2022 走看看