1新建頁面 目錄
2新建組件頁面
3 goods-detail.js 文件內容
// pages/goods/goods-detail.js
Page({
/**
* 頁面的初始數據
*/
data: {
datalist: [{ num: 1, name: 'zhangsan' }, { num: 2, name: 'abdddd' }, { num: 3, name: 'ddddd' }, { num: 4, name: 'aadadfkkkk' }, { num: 5, name: 'niuniu' }]
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
4.goods-detail.json 文件內容
{
"usingComponents": {
"list-test": "../childlist/listtest"
}
}
5 goods-detail.wxml 文件內容
<!--pages/goods-detail.wxml-->
<view>
<view class="a-order" wx:for-items="{{datalist}}" wx:key="{{index}}">
<view>{{item.num}}--{{index}}</view>
<view> {{item.name}}</view>
</view>
<text>------------------------------下面是組件顯示----</text>
<list-test datalistdata="{{datalist}}"/>
</view>
6組件文件 listtest.js
// pages/goods/childlist/listtest.js
Component({
/**
* 組件的屬性列表
*/
properties: {
datalistdata: {
type: Array
}
},
/**
* 組件的初始數據
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
}
})
7 listtest.wxml
<view>
<view class="a-order" wx:for-items="{{datalistdata}}" wx:key="{{index}}">
<view>{{item.num}}--{{index}}</view>
<view> {{item.name}}</view>
</view>
</view>
8 運行效果
本地測試關閉合法域名檢測--工具--項目詳情
