核心:使用wx:for="{{posts_key}}",用數組的形式來綁定多個的內容,利用for循環來反復調用后台數據,如果沒用用posts_key了,那么對應的item_這種命名就是不可以的!
Wxml
<block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx" wx:key="idx"> <view catchtap="onPostTap" data-postId="{{item.postId}}"> <image src="{{item.images}}"></image> <text>{{item.content}}</text> </view> </block>
JS
var postsData = require('../../data/skip-data.js') const app = getApp() Page({ data: { }, onLoad:function(options){ this.setData({ posts_key:postsData.postList }); }, })
Skip-data,js(這個腳本用來模擬本地數據庫)
var local_database = [ { content: "VIPKID 純北美外教 代言人劉濤", images: "/images/dian1@2x.png", postId: 0, }, { content: "噠噠英語 專屬外教 代言人孫儷", images: "/images/dian1@2x.png", postId: 1, }, { content: "51Talk 高校教材 代言人賈乃亮", images: "/images/dian1@2x.png", postId: 2, }, { content: "VipJr 量身定制課 代言人姚明", images: "/images/dian1@2x.png", postId: 3, }, { content: "以上都想試聽", images: "/images/dian1@2x.png", postId: 4, }, ] module.exports = { postList: local_database }