微信小程式 wx:key 高階列表迴圈
讓我們先看看程式碼
.wxml 程式碼
<block wx:for="{{items}}"><label><checkbox />{{item.title}}</label>
</block>
<button bindtap="chng">變更項</button>
.js 程式碼
data: {items: [
{
id: 1,
title: "a"
},
{
id: 2,
title: "b",
},
{
id: 3,
title: "c",
}
]
},
chng: function
this.setData({
items: [
{
id: 2,
title: "b"
},
{
id: 1,
title: "a",
},
{
id: 3,
title: "c",
}
]
})
}
效果如下:
點選按鈕“變更項”前,我們選中第二項,即 b 那一項。效果如下:
點選按鈕“變更項”後,我們改變了 items 項的順序。效果如下:
雖然字母順序變了,但是選擇項沒有變。
如果我們希望使用者輸入也跟隨,則使用 wx:key
wx:key 指定 items 中一個具有唯一值的屬性,比如我們這裡的 id,
將 <block wx:for="{{items}}"> 改為 <block wx:for="{{items}}" wx:key="id"
此時,點選按鈕“變更項”後,我們改變了 items 項的順序。效果如下:
以上只是改變順序,如果是改變 items 元素個數,道理一樣的。
再細化一下,如果我們對 checkbox 使用了 checked="{{checked}}",而 setData 賦新值時為陣列元素設定了:{ id:2, checked:false, title:"b" }, 而在點按鈕之前又選中了 b,點按鈕後,是繼續選中 b,還是聽新值的呢?聽新值的。
那新值不要 checked 屬性,是不是就繼續選中 b 呢?也不是,因為沒有賦值,對 {{checked}} 來說,相當於 false(boolean 預設值是 false)。
相關推薦
微信小程式 wx:key 高階列表迴圈
讓我們先看看程式碼 .wxml 程式碼 <block wx:for="{{items}}"> <label><checkbox />{{item.title}}</label></block><bu
微信小程式wx:for迴圈列表渲染
列表渲染 wx:for 在元件上使用 wx:for 控制屬性繫結一個數組,即可使用陣列中各項的資料重複渲染該元件。 預設陣列的當前項的下標變數名預設為 index,陣列當前項的變數名預設為 item <view wx:for="{{array}}">
微信小程序 wx:key
margin 分享 gin 微信 ont pan jpg orm 圖片 在實際開發過程中遇到 warning: Now you can provide attr "wx:key" for a "wx:for" to improve performance. 動態渲染 結構代
微信小程序 - wx:key
prope 新的 png developer his 關鍵字 組件 true ram 看官方源碼以及代碼示例: 示例官網:列表渲染wx:key 官方原話 如果列表中項目的位置會動態改變或者有新的項目添加到列表中,並且希望列表中的項目保持自己的特征和狀態(如
坑:微信小程式wx.request和wx.uploadFile中傳引數的區別
微信小程式中通過元件<form>提交表單的時候,在js中通過e.detail.value得到所提交表單的json格式資料。一般提交表單我們都是通過wx.request請求,提交表單資料,通過引數data傳資料, wx.request({ url: 'test.php', //僅為示例,
微信小程式wx.request踩坑記錄
一:header['content-type'] 為 application/json 的資料 前端 wx.request({ url: apiUrl, //替換成自己的伺服器地址 data: {
微信小程式 wx.request wepy 簡單封裝
本文出自: http://blog.csdn.net/wyk304443164 很簡單 import sha1 from './sha1' // sign // 簽名 function sign (signObj = {}) { ... // 自行加密
微信小程式 隱藏或顯示列表中的一行資料
wxml <view class='text'> <text>方法一</text> </view> <view wx:for="{{list}}" wx:key="content" wx:for-index="key"> <
微信小程式wx.redirectTo、wx.navigateTo跳轉失敗
在開發小程式時,用到下面三種頁面跳轉方法,路徑寫對後跳轉沒有反應,也沒報錯。 wx.navigateTo(OBJECT) 保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。 wx.redirectTo(OBJECT) 關閉當前頁面,跳轉
微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子
微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子 解決方案 有種場景:頁面 A => B => C => D, 當在 C 頁面呼叫 wx.reLaunch({url:’/pages/D’}) 時,頁面 A 、B、C 的 onUnloa
微信小程式wx:for和wx:for-item的區別
wx:for="{{list}}"用來迴圈陣列,而list即為陣列名wx:for-item="items" 即用來定義一個迴圈過程中每個元素的變數的 如果是一維陣列,按照如下方式迴圈出來: 1 2 3 <view wx
微信小程式選項卡、列表動態顯示按鈕
小程式選項卡功能實現 wxml頁面: 先給選項卡賦值data-current=“待確認” 新增點選事件bindtap=“clickTab”, 在js裡clickTab獲取選項卡的值,e.target.dataset.current 通過that.setData賦值給curr
微信小程式wx.login登陸+php
wxml: <button bindtap='login'>登入</button> js: //登入獲取code login: function () {
微信小程式wx.uploadFile的兩個坑
setImage:function(e){ var _this = this //坑1 wx.chooseImage({ count: 1, sizeType: [‘original’, ‘compressed’], sourceType: [‘album’, ‘camera’], success: fun
微信小程式wx.request()封裝
微信小程式開發過程中,請求用的次數是比較多的,那麼能自己每次的重複程式碼太多,所以還是自己封裝一個請求吧,使程式碼越來越精簡。 現在請求分為兩種一種是GET一種是POST,在微信小程式的請求中POST請求的header中的'content-type'為'applicati
微信小程式wx.getUserInfo方法獲取的使用者資訊為英文字母
我們在開發微信小程式的時候會發現用wx.getUserInfo方法獲取到的使用者國家、省份、城市等資訊都是英文字母,要想獲取中文資訊,您只需在wx.getUserInfo中加上 lang:"zh_CN"這條語句就可以,如下圖所示:
微信小程式wx.uploadFile(上傳檔案)PHP伺服器獲取formData的資料
例如下面的程式碼是微信小程式上傳圖片的程式碼: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({
使用Promise對微信小程式wx.request請求方法進行封裝,配有詳細過程
採用Promise的方式來封裝而不採用回撥函式(callBack)的方式封裝的主要好處是防止回撥地獄等。。。 主要分為四個部分: 1、config.js檔案,主要存放小程式的配置,例如請求的伺服器地址 const config = { api_base_url:
MVC Api微信小程式wx.uploadFile上傳檔案,前後端程式碼例項
// 小程式端js Page({ /** * 頁面的初始資料 */ data: { userHeaderImage: "../../../images/1.jpg" }
微信小程式:wx.downloadFile 不成功,沒報錯 downloadFile:fail Error: socket hang up 錯誤
小程式剛出來,因為預研需要,很不幸的做了一回小白鼠,於是掉進了神坑。 下載檔案,首先是沒報錯了,然後不成功,這個時候,請把 fail開啟,把fail的報錯資訊輸出來 wx.downloadFile({ url: 'https://xxxx.xxx.