微信小程序中下拉刷新和數據綁定的一些小坑

發布時間：2018-05-02 14:38 所屬欄目：小程序開發教程

前言

最近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}}" 來判斷展示的是點亮與否。

  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,
     });
  
   },