微信小程序的數據綁定與下拉刷新與template模塊使用問題

前言

最近10幾天都在學習小程序的開發，遇到了一些問題和筆記有趣的東西，今天總結了一下，和你們分享

1.小程序中的template模塊使用

在一個月黑風高的夜晚，我忽然發現一個頗有意思的東西，那就是template模塊，它能夠將你定義的一個HTML5模塊包住，而後利用template，在你的小程序任意一個頁面使用，這樣極大的減小了程序中的複製-粘貼，複製-粘貼(通常用於須要循環使用的界面)。下面就用我本身的一個template模塊來說解下。

第一步：建立頁面

在pages裏面建立存儲你template模塊的頁面，便於其餘頁面對其的引用

"pages/index/index",
"pages/find/find",
"pages/gift/gift",
"pages/activity/activity",
"pages/common/list",//存儲template模塊的頁面
"pages/white/white"

第二步：建立template模塊

template模塊實例
<template name="job_list">
 <view class="br"></view>
 <navigator url="../white/white" class="page_appmsg">  //點擊跳轉
        <view class="page">
                <view class="page__hd ">
                    <image class="page__thumb" src="{{image}}" mode="aspectFill"/>
                    <view class="page__hd_title">
                        <view class="page__hd_title title">{{title}}</view>
                        <view class="page__hd_title school">{{school}}</view>
                        <view class="page__hd_title request">
                            <text class="page__hd_title pink">{{pink}}</text>
                            <text class="page__hd_title time">{{time}}</text>
                            <view class="page__hd_title cool"><i class="iconfont icon-zan1 active"></i>{{cool}}</view>
                        </view>
                    </view>
                </view>   
                <view class='page__ft'>
                 <i class="iconfont icon-jian-copy active"></i>{{page__ft}}}
                </view>
        </view>
</navigator>
</template>

在你須要重複使用的html用一個<template>標籤包起來，並給它取個名字 。
（固然了，還有WXSS的編寫，這裏由於不是很重要我就不放出來了）
完成了這步，你就能夠盡情的在你須要這個模板的頁面引用這個模塊了。

第三步：在各個頁面引用template模塊

①在你想要引用的界面的WXSS和WXML上引用template的wxml和wxss，

@import '../common/list.wxss';
<import src="../common/list.wxml" />

②在你須要的盒子裏面添加template標籤，你想要引用那個template模塊，就在is裏面填哪一個模塊的名字

<template is="job_list" data="{{jobs}}"/>

若是你是在一個循環裏面引用的template就須要改成data="{{...item}}"如：

<block wx:for="{{jobs}}" wx:key="{{index}}">
            <template is="job_list" data="{{...item}}"/>
        </block>

代碼：

<import src="../common/list.wxml" />
<view class="swiper-tab">
    <view class="swiper-tab-item {{activeIndex==0?'active':''}}" data-current="0" bindtap="clickTab">活動</view>
    <view class="swiper-tab-item {{activeIndex==1?'active':''}}" data-current="1" bindtap="clickTab">視頻</view>
    <view class="swiper-tab-item {{activeIndex==2?'active':''}}" data-current="2" bindtap="clickTab">直播</view>
</view>
<swiper current='{{activeIndex}}' bindchange="swiperTab">
    <swiper-item>
        <view class="swiper-item__content">
            <block wx:for="{{jobs}}" wx:key="{{index}}">
                <template is="job_list" data="{{...item}}"/>
            </block>
        </view>
    </swiper-item>
    <swiper-item>
            <view class="swiper-item__content">
                    <block wx:for="{{jobs}}" wx:key="{{index}}">
                        <template is="job_list" data="{{...item}}"/>
                    </block>
                </view>
    </swiper-item>
    <swiper-item>
            <view class="swiper-item__content">
                    <block wx:for="{{jobs}}" wx:key="{{index}}">
                        <template is="job_list" data="{{...item}}"/>
                    </block>
                </view>
    </swiper-item>
</swiper>

效果圖：

2.數據綁定

又是一個月黑風高的夜晚，我在實現點亮的功能的時候，發現我只點了一個地方的點贊，整個頁面的點贊都亮了起來，這確定是不行的，用戶明明只對這一個感興趣，你怎麼能所有點亮呢？因而我開始了思考，發現我犯了一個十分愚蠢的問題，那就是沒有給個人數據綁定一個值，這就好像沒有給喊名字同樣：到了飯點你出去大喊一聲:兒子,回家吃飯了!結果確定是家家的兒子都回去吃飯了，然而別人家的飯都還沒開始煮呢，你怎麼就喊人家回去了呢，你確定得喊：二狗子，回家吃飯了！別人家的娃纔不會也跟着回家。這和點擊事件是一個道理的，你必須給你的每項數據綁定一個id，用if語句，將數組遍歷一遍，將每一個數據的ID拿出來看看，看下你點的這個數據的ID，與數組中哪一個相符合。如何成功配對了 ，恭喜，你能夠執行點亮操做了！
功能實現以下：

• wxml

  <a wx:if="{{!item.isSelected}}" id="dianzan1" data-id = "{{item.id}}"

  bindtap="cool">
  <i class="iconfont icon-dianzan1 active"></i>

  
  <a wx:if="{{item.isSelected}}" id="dianzan1" data-id = "{{item.id}}"

  bindtap="cool">
  <i class="iconfont icon-dianzan1-copy active"></i>

在數據中，我不只給了它一個ID，還給了它一個布爾值，而且所有定爲false，這樣即可以經過
wx:if="{{!item.isSelected}}" wx:if="{{item.isSelected}}" 來判斷展現的是點亮與否。

• js

  cool:function(e) {
       let jobs = this.data.jobs
       for(let key in jobs){                       // 遍歷一遍數據
        // console.log(jobs[key].id);           
                                           //將界面的數據與jobs的數據進行匹配
         if (jobs[key].id === e.currentTarget.dataset.id){ 
           if (!jobs[key].isSelected){             //處於未點亮狀態時的操做
             jobs[key].isSelected = true;
             wx.showToast({
               title: '點同意功',
               icon: 'success',
               duration: 1500,
             })    
           }else{                                 //處於點亮時的操做
             jobs[key].isSelected = false;
             wx.showToast({
               title: '取消點贊',
               icon: 'success',
               duration: 1500,
             })
           }       
         }
       }
       this.setData({                             // 將界面更新
         jobs : jobs,
       });
    
     },

• 效果圖

3.下拉刷新觸發過多問題

又是一個月黑風高的夜晚，我忽然發現了一個bug！在小程序下拉刷新時，我明明只加了一組數據，然而卻刷出來了2到3組數據，（這裏我使用的是scroll-view組件的bindscrolltolower屬性）

嚇得我趕忙回去看了一波代碼，以下：

lower:function(){
    // if(i!=1){
    //   return
    // }i++;
    var that = this;
    // console.log('下拉加載');
    wx.showToast({
      title:'加載中',
      icon:'loading',
      duration: 1000,
    });
    setTimeout(function(){
      wx.showToast({
        title:'加載成功',
        icon:'success',
        duration:1000,
      });

      wx.request({
        url:'https://www.easy-mock.com/mock/5a24075682614c0dc1bf0997/abc/abc',
        complete:(res)=>{
          console.log(that.data.jobs);
          var jobs = that.data.jobs.concat(res.data.data.jobs)
         that.setData({
            jobs:jobs,
          })
        },
      })
    },1000);
   
  },

仔細看看，發現並無邏輯錯誤，我思前想後，以爲有多是函數屢次觸發致使的，因而我在函數的開始加入 console.log('下拉加載');在調試器中，我發現下拉刷新也是跟着出現了2次，爲了更加保險，我在page外定義了一個var i = 1；並在函數外面加上了

if(i!=1){
     return
 }i++;

再次測試，發現只出現了一組數據，由此我肯定了這個bug是因爲下拉刷新觸發過多的緣由。可是怎麼解決呢，我想了想，以爲能夠用一個鎖，把這個函數鎖起來，等函數執行完畢，在把函數打開。
修改後的函數以下：

data: {
    jobs:[],
    windowHeigt:0,
    pullUpAllow:true,
    pullLowAllow:true
  },
lower:function(){
    var that = this;
    if(that.data.pullLowAllow) {        //肯定開關的開啓與否
      that.setData({
        pullLowAllow:false              //關閉開關
      })
       console.log('下拉加載');
      wx.showToast({
        title:'加載中',
        icon:'loading',
        duration: 1000,
      });
      setTimeout(function(){
        wx.showToast({
          title:'加載成功',
          icon:'success',
          duration:1000,
        });
        wx.request({
          url:'https://www.easy-mock.com/mock/5a24075682614c0dc1bf0997/abc/abc',
          complete:(res)=>{
            console.log(that.data.jobs);
            var jobs = that.data.jobs.concat(res.data.data.jobs)
          that.setData({
              jobs:jobs,
              pullLowAllow:true            //加載完畢，開啓開關
            })
          },
        })
      },1000);
    }
  },

結果：

這裏

項目展現

在最後，也把我辛苦Coding了N天的項目展現一下給你們吧
（因爲一開始選題的失敗，並無完成什麼重要的功能，你們就別說出來了T-T）

• 底部tabBar切換

• 圖片輪播與界面切換

• 點擊事件

• 下拉刷新與上拉刷新

總結

• 要熟讀微信小程序官方文檔,勤用小程序自帶的API，能夠節省不少時間和精力
• 阿里巴巴的iconfont是真的好用，不少圖標均可以在上面下載，不只有png版還有svg版
• Easy Mock 能夠創建一個假後臺，對於咱們學習小程序有很大的幫助
• weui框架對小程序有很大的幫助

項目地址

https://github.com/fsafafaf/d...