这两天写了一个wx小程序的我的课程的页面,比较简单,但是关联服务器是第一次请求,所以和大家分享一下
<view class="body">
<view class="title">我的课程</view>
<view class="line2"></view>
<view wx:for="{{RSList}}" wx:key="{{index1}}">
<view class="RS">
<view class="RS_img">
<view class="RS_img_text">{{item.text1}}</view>
<progress percent = "{{item.pro}}" show-info="true" color="red" stroke-width="10" activeColor="green" backgroundColor="#ccc" />
</view>
<view class="line"></view>
<view class="RS_S1">
<view>笔记</view>
<view>{{item.text2}}</view>
</view>
<view class="line"></view>
<view class="RS_S3" catchtap="{{item.tocatch}}">继续学习</view>
</view>
<view class="line2"></view>
</view>
</view>
.body{
height: 100%;
width: 100%;
}
.line{
margin-left: 3%;
margin-right: 3%;
background-color: gray;
width: 3rpx;
}
.line2{
margin-top: 40rpx;
background-color: gray;
width: 100%;
height: 3rpx;
}
.RS{
display: flex;
flex-direction: row;
width: 100%;
height: 100rpx;
margin-top: 50rpx;
}
.RS_img{
width: 55%;
}
.RS_img_text{
color: black;
font: 100rpx;
margin-right: 20%;
}
.RS_S1{
margin-top:10rpx;
width: 20%;
text-align: center
}
.RS_S3{
width: 25%;
color: blue;
margin-top: 20rpx;
text-align: left;
}
.title{
width: 100%;
text-align: center;
height: 80rpx;
font-size: 60rpx;
}
Page({
/**
* 页面的初始数据
*/
data: {
RSList: [
{
text1: "奥特曼打怪兽",
text2: 0,
pro: 30,
tocatch:"",
},
{
text1: "怪兽打奥特曼",
text2: 1,
pro: 10,
tocatch:"",
}
],
},
/**
* 生命周期函数--监听页面加载
*/
getRSList() {
let that = this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList',
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function (res) {
// success
// console.log(res);
if (res.data.code === 0) {
that.setData({
RSList: res.data.data.RSList
})
}
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
onLoad: function (options) {
this.getRSList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
{
"usingComponents": {}
}
###效果图