這里寫了三個(gè)大的盒子放著圖片和文字信息,再將他們放到swiper-item里面，用swiper組件實(shí)現(xiàn)整個(gè)盒子的左右滑動(dòng)

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

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

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

先給他們寫個(gè)滑動(dòng)的時(shí)候觸發(fā)的動(dòng)畫效果

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

在page的data里面定義三個(gè)變量，將left,right變量綁定到對(duì)應(yīng)圖片中

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

在swiper綁定事件中具體判斷左右滑動(dòng)事件

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

從本地上傳圖片

這個(gè)呀查一查小程序開發(fā)文檔就好了，先在要上傳圖片的地方的src綁定個(gè)數(shù)據(jù)變量

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

放入圖片默認(rèn)地址，就是上傳圖片之前的添加圖片

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

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

var that = this;
wx.chooseImage({
  count: 1, //上傳圖片數(shù)量
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
  sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
  success: function (res) {// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
      var tempFilePaths = res.tempFilePaths;
      that.setData({
          imgUrl: tempFilePaths
    })
      wx.showToast({//顯示上傳成功
          title: '上傳成功',
          icon: 'success',
          duration: 2000
    })
  }

})，

配對(duì)成功列表據(jù)通過easy-mock獲取后臺(tái)數(shù)據(jù)

block wx:for渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊

<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>

獲取后臺(tái)數(shù)據(jù)

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

其它差不多就是切頁面了，個(gè)人原因用不太習(xí)慣weui的官方樣式，每個(gè)頁面都是我自己嘔心瀝血碼出來的，所以大家不喜輕點(diǎn)噴哈,還在努力學(xué)習(xí)當(dāng)中~~~

項(xiàng)目開發(fā)用到的一些工具

微信開發(fā)者工具、VScode、Github
Iconfont阿里巴巴矢量圖標(biāo)庫：各種圖片logo應(yīng)有盡有，前端開發(fā)必備
esay-mock:模擬數(shù)據(jù)請(qǐng)求，實(shí)現(xiàn)無后端編程
W3Cschool微信小程序開發(fā)教程手冊(cè)文檔：開發(fā)小程序要多看看哦

小結(jié)

emmmm目前項(xiàng)目功能還是很簡(jiǎn)單呀，還有很多功能后面慢慢實(shí)現(xiàn)吧~比如利用將上傳的圖片放到storage中，頁面刷新之后圖片依然在，slider滑動(dòng)到某一處在頁面上保存當(dāng)前值，模擬配對(duì)成功后彈出提醒頁面等等......

也希望遇到熱愛學(xué)習(xí)的小伙伴一起交流學(xué)習(xí)，一起在前端坑里越陷越深hhh