1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* ---topics.js----*/ Page({ data:{ topics: [ {title:"初始angular"}, {title:"初始ionic"}, {title:"初始wechat"}, ], }, onLoad: function () { this.data.topics.push({title:"初始 onload "}) console.log(this.data.topics) } }) /* ---topics.js----*/ |
1 2 3 4 5 6 7 | /* ---topics.wxml----*/ <view wx:for="{{topics}}" wx:for-item="topic" > <text>{{index}}: {{topic.title}}</text> </view> /* ---topics.wxml----*/ |
这里 wx:for="{{topics}}" 循环我们data中的topics数据。 wx:for-item="topic"则是我们每个实例 。类似与forEach （如果没有wx:for-item 则默认为item.title）-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* ---app.json----*/ { "pages":[ "pages/index/index", "pages/logs/logs", "pages/topics/topics" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } } /* ---app.json----*/ |
1 2 3 4 5 6 7 | /* ---page/index/index.wxml----*/ <view bindtap="onTopics" class="usermotto"> <text class="user-motto">{{motto}}</text> </view> /* ---page/index/index.wxml----*/ |
可以看到我新添加了一个
onTopics 的方法 bindtap类似与click方法
1 2 3 4 5 6 7 8 9 10 11 | /* ---page/index/index.js----*/ page({ onTopics : function(){ wx.navigateTo({ url: ‘../topics/topics‘ }) } }) /* ---page/index/index.js----*/ |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* ---题外讲解----*/ wx.navigateTo({ url: ‘String‘, success: function(res){ // 成功后执行 }, fail: function() { // 失败后执行 }, complete: function() { // 无论成功或失败都执行 } }) /* ---题外讲解----*/ |
然后。当我们点击 hello word 会跳转到页面 index.wxml上 这样也验证了 topics.js 的onload确实在数组里添加了一条数据
