写在前面
本篇文章是微信小程序开发入门的第二十四篇,进行水果管理页面开发
水果的查询、编辑、新增、删除、获取一条详情我们前面已经都做完了,现在就是把页面重新设计一下
水果管理页面
首先还是配置下页面的导航栏,引入页面需要用到的组件,打开fruit-manage.json文件,编写代码如下:
加载水果列表的时候需要显示loading组件
{
"usingComponents": {
"t-loading": "tdesign-miniprogram/loading/loading",
"t-icon": "tdesign-miniprogram/icon/icon"
},
"navigationBarTitleText": "水果管理",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black"
}
接着是页面,打开fruit-manage.wxml文件,编写代码如下:
样式和水果类型列表页面的样式一样
页面列表数据加载的时候显示loading组件
加载完成后,若是数据的长度为0,则显示“暂无数据”,大于0,则循环显示数据
还有查看详情、新增水果功能,分别绑定了事件onEditfruit和onAddfruit,在js文件中会定义这两个方法
<view class="fruit_page">
<view class="loading" wx:if="{{loading}}">
<t-loading theme="circular" size="64rpx" class="large" />
</view>
<view class="fruit_ul" wx:else>
<view class="fruit_li" wx:for="{{fruitList}}" wx:key="index">
<view class="li_name">
{{item.name}}
</view>
<view class="li_arrow" bindtap="onEditfruit" data-item="{{item}}">
<view class="edit_text">查看详情</view>
<t-icon name="chevron-right" size="48rpx" />
</view>
</view>
<view class="no_data" wx:if="{{fruitList.length === 0}}">
暂无数据
</view>
</view>
<view class="add_box" bindtap="onAddfruit">
新增水果
</view>
</view>
然后就是fruit-manage.js文件,代码如下:
在onShow的时候调用getFruitList方法,为什么使用onShow在前面的文章中有讲过
getFruitList调用云函数获取水果列表
onAddfruit方法将页面跳转到fruit-edit-add页面
onEditfruit方法也将页面跳转到fruit-edit-add页面,并传递参数
Page({
data: {
fruitList: [],
loading: false,
},
onShow() {
this.getFruitList()
},
getFruitList() {
this.setData({
loading: true
})
wx.cloud.callFunction({
// 云函数名称
name: 'fruit',
// 传给云函数的参数
data: {
type: 'search',
limit: 10,
page: 1
},
})
.then(res => {
this.setData({
loading: false,
fruitList: res.result.data.data
})
})
.catch(err => {})
},
onAddfruit() {
wx.navigateTo({
url: `/pages/fruit-edit-add/fruit-edit-add`,
})
},
onEditfruit(e) {
const item = e.currentTarget.dataset.item
wx.navigateTo({
url: `/pages/fruit-edit-add/fruit-edit-add?info=${JSON.stringify(item)}`,
})
},
});
最后是fruit-manage.wxss样式,代码如下:
.fruit_page {
width: 750rpx;
position: absolute;
top: 16rpx;
bottom: 120rpx;
left: 0;
right: 0;
background-color: #fff;
}
.no_data {
text-align: center;
padding: 80rpx 0 32rpx;
color: #999;
font-size: 28rpx;
}
.add_box {
position: absolute;
bottom: -80rpx;
left: 0;
right: 0;
border-top: 1rpx solid #f7f7f7;
width: 380rpx;
margin: 0 auto;
background-color: #0052d9;
color: #fff;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 0 0 40rpx 40rpx;
}
.loading {
text-align: center;
margin-top: 80rpx;
}
.fruit_ul {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.fruit_li {
height: 48rpx;
line-height: 48rpx;
margin: 0 16rpx;
padding: 16rpx;
border-bottom: 1rpx solid #f7f7f7;
display: flex;
justify-content: space-between;
}
.li_name {
width: 500rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.li_arrow {
color: #bfbfbf;
display: flex;
}
.edit_text {
font-size: 28rpx;
}
最终页面效果如下:
写在最后
以上就是水果管理页面开发的全部代码