这篇是特意分开写的。网上找的帖子大多是直接在onload中请求数据。而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染。所以搞了挺久的,在此记录一下。
废话不多说,直接上代码:
一、前端页面代码:
<view class="container2">
<view class="panel">
<label class="title">请输入查询内容</label>
<input class="inputarea"/>
<button bindtap='onRequest' type="primary" class="searBtn">查询</button>
</view>
<scroll-view class="article-list" style="height:500px" scroll-y="true" bindscrolltolower="nextPage">
<block wx:for="{{list}}">
<view class="list-item" index="{{index}}">
<view class="title">
<view class="title-name">{{item.title}}</view>
</view>
</view>
</block>
</scroll-view>>
解释:
data: {
motto: '你懂我懂不懂',
list:[]
},
onload:function()
{
this.onRequest();
},
onRequest:function()
{
var that = this;
wx.request({
url: 'https://api.douban.com/v2/movie/top250',
method:"GET",
header: {
'Content-Type': 'json'
},
success: function (res) {
console.log(res.data.subjects);
var date = res.data.subjects;
that.setData({
list: date
})
},
fail: function () {
console.log("接口调用失败");
}
})
},
nextPage:function()
{
console.log("下拉触发该函数");
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
})