微信小程序系列5（网络请求demo）

首先来看一下效果



love.xml布局,这里做了一个循环item

wx:for在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<!--pages/love/love.wxml-->
<view class="list">
<block wx:for="{{list}}" wx:key="{{item.id}}">
<view class="list-item">
<text class="title">{{item.title}}</text>
<text class="detail">{{item.content}}</text>
</view>
</block>
</view>

love.js逻辑处理页面,这里做了一个网络请求,同时也测试了一下下拉刷新回调

Page({
data: {
list: []
},
//初始化加载数据
onLoad: function () {
this.getStorys(0)
},

//下拉刷新更新数据
onPullDownRefresh: function () {
this.getStorys(1)
},

/**
* 获取开心一刻列表数据
*/
getStorys: function (type) {
//打开菊花
if (type == 0) {
wx.showLoading({
title: '加载中',
})
}
//success回调this作用域更新不了外面的数据,所以保存当前this
var that = this
wx.request({
url: 'http://shop.honaf.com/story',
method: 'get',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
if (res.data.status == 1) {
var storys = res.data.data
for (var i = 0; i < storys.length; i++) {
storys[i]['content'] = storys[i]['content'].slice(0, 30) + '...';
}
//重新渲染页面
that.setData({
list: storys
})
}
},
fail: function () {
wx.showToast({
title: '服务器异常',
duration: 1500
})
},
complete: function () {
//关闭菊花
if (type == 0) {
wx.hideLoading()
} else {
wx.stopPullDownRefresh()
}
}
})
},

})

love.json配置信息

{
"enablePullDownRefresh": true,
"navigationBarTitleText": "开心一刻"
}

love.wxss页面用到的样式

/* pages/love/love.wxss */
.list {
display: flex;
flex-direction: column;
}

.list-item {
display: flex;
flex-direction: column;
margin: 15rpx;
background-color: #fff;
border-radius: 10rpx;
/*align-items: center;*/
padding: 15rpx;
}

.title {
color: black;
font-size: 18px
}

.detail {
color:darkblue;
font-size: 14px;
}