写在前面

本篇文章是微信小程序开发入门的第二十四篇，进行水果管理页面开发

水果的查询、编辑、新增、删除、获取一条详情我们前面已经都做完了，现在就是把页面重新设计一下

水果管理页面

首先还是配置下页面的导航栏，引入页面需要用到的组件，打开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;
}

最终页面效果如下：

写在最后

以上就是水果管理页面开发的全部代码