左滑右滑的樂趣

時間 2019-11-08

標籤滑的樂趣简体版

原文原文鏈接

左滑右滑你再也不是一我的

不管你是一個程序猿仍是一個程序媛，天天干的事除了coding仍是coding，代碼不能解決的問題（什麼問題本身內心還沒點abcd數嘛），探探能幫你解決。最近網上特流行一款交友軟件叫探探（聽說是yp軟件）。做爲探探曾經的一名歷來只瀏覽圖片可是沒有yue過的資深玩家同時又是一位熱愛前端的妹子，我決定要仿一下這個app。既然是寄幾開發，那還不是寄幾說了算，毫無疑問整款APP的主題風格被我改爲我最愛的終極少女粉了hhh，下面讓咱們一塊兒來感覺下探探的魅力吧~前端

項目總體效果

項目部分功能點解析

主頁圖片左滑右滑對應按鈕變化

首先咱們來聊一下最讓我頭痛的地方，就是主頁面的左右滑動事件而且對應按鈕會相應變化，即我左滑一下圖片下面的灰色按鈕會有相應的動畫效果，右滑則對應着圖片下面的紅色按鈕。對於一個剛入小程序坑的妹子來講，沒有大神指點不知道要在這裏面的邏輯坑還要繞多久才能繞出來。得一高人指點，我才完美滴實現了這個功能。git

這裏寫了三個大的盒子放着圖片和文字信息,再將他們放到swiper-item裏面，用swiper組件實現整個盒子的左右滑動github

<swiper class='swiper-item__content' current="" bindchange="changeswiper">
    <swiper-item class="swip">
        <view class='page__bd_content'> 
            <image class="slide-image" src="http://pic.qqtn.com/up/2017-12/15126388387704237.jpg" mode="scaleToFill"/> 
            <view class="name">K</view>
            <view class="age">♂21</view>
            <view class="conste">金牛座</view>
            <view class="status">文化/教育</view> 
        </view>
    </swiper-item>
</swiper>

哦盒子下面不是按鈕，我是放了兩張圖片。編程

<view class="page__ft">
    <image class="notlike {{left?'active':''}}" src="../../images/notlike.png" />
    <image class="like {{right?'active':''}}" src="../../images/like.png" />
  </view>

先給他們寫個滑動的時候觸發的動畫效果小程序

.active {
    animation: active 1s ease;//定義一個叫作active的動畫
}
@keyframes active {//補充active動做腳本
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.0);
    }
}

在page的data裏面定義三個變量，將left,right變量綁定到對應圖片中後端

data: {
    left: false ,
    right: false,
    activeIndex: 0
},

在swiper綁定事件中具體判斷左右滑動事件微信小程序

changeswiper: function(e) {
    var index = e.detail.current;//當前所在頁面的 index
    if(index > this.data.activeIndex) {//左滑事件判斷
      this.setData({
        left: true//若爲左滑，left值爲true,觸發圖片動畫效果
      })
    } else if(index < this.data.activeIndex) {//右滑事件判斷
      this.setData({
        right: true//若爲右滑，right值爲true,觸發圖片動畫效果
      })
    }
    setTimeout(() => {//每滑動一次，數據發生變化
      this.setData({
        activeIndex: index,
        left:false,
        right:false
      })
    }, 1000);
  },

從本地上傳圖片

這個呀查一查小程序開發文檔就行了，先在要上傳圖片的地方的src綁定個數據變量微信

<image class="addImg" src="{{imgUrl}}" bindtap="uploadImg" />

放入圖片默認地址，就是上傳圖片以前的添加圖片微信開發

data: {
    imgUrl: '../../images/addImg.png'
  },

經過綁定tap事件將上傳的圖片地址替換進去
uploadImg: function(e) {app

var that = this;
wx.chooseImage({
  count: 1, //上傳圖片數量
  sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
  sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
  success: function (res) {// 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片
      var tempFilePaths = res.tempFilePaths;
      that.setData({
          imgUrl: tempFilePaths
    })
      wx.showToast({//顯示上傳成功
          title: '上傳成功',
          icon: 'success',
          duration: 2000
    })
  }

})，

配對成功列表據經過easy-mock獲取後臺數據

block wx:for渲染一個包含多節點的結構塊

<swiper-item>
    <view class="swiper-item__content">
        <block wx:for="{{friendsList}}" wx:key="index">
            <view class="weui-tab__content">
                <view class="weui-media-box__hd">
                    <image src="{{item.avatar}}" mode="aspectFit"></image>
                </view> 
                <view class="weui-media-box__bd">
                    <view class="weui-media-box__nickname">{{item.nickname}}</view>
                    <view class="weui-media-box__message">{{item.message}}</view>
                </view>
            </view>
        </block>
    </view>
</swiper-item>

獲取後臺數據

wx.request({
      url: 'https://www.easy-mock.com/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList',
      success: (res) => {
        // console.log(response);
        this.setData({
          friendsList: res.data.data.friendsList
        })
      }
    })

其它差很少就是切頁面了，我的緣由用不太習慣weui的官方樣式，每一個頁面都是我本身嘔心瀝血碼出來的，因此你們不喜輕點噴哈,還在努力學習當中~~~