持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

Vant Weapp的组件

• 根据vant官网的指导，引入navbar导航栏 链接：youzan.github.io/vant-weapp/…

• Vant Weapp的Card卡片组件 链接：youzan.github.io/vant-weapp/…

这两个是我们接下来需要用到的组件

代码详情

• 首先我们需要调用云函数获取用户发布的数据，js代码如下：

getReleaseData(){
  wx.cloud.callFunction({
    name:"get_release_data"
  }).then(res=>{
    this.setData({
    releaseData:res.result.data
   })
  })
},

• 把数据拿到了之后我们需要将数据渲染到wxml页面上，代码如下：

<van-card
wx:for="{{releaseData}}"
wx:key="index"
  title="{{item.title}}"
>
</van-card> 

• 之前引入的导航栏我们需要将他放置到头部，并且帮他绑定了一个删除事件，让用户可以选择清空自己发布的商品，代码如下：

<van-nav-bar
  right-text="清空"
/>

• 导航栏的js逻辑代码

1. 这里是当用户点击清空时，会弹出一个消息框，提示用户确定删除吗？可以选择确定或者取消。

 onClose(event) {
    const { position, instance } = event.detail;
    switch (position) {
        Dialog.confirm({
          message: '确定删除吗？'
        }).then(() => {
          instance.close();
        });
        break;
    }
  }, 
  onClickRight() {
  wx.showModal({
    title: '提示',
    content: '确定清空吗?',
  })

},

2. 最后我们在json文件内将我们的页面标题改为发布的商品，具体代码如下：

{
  "usingComponents": {},
  "navigationBarTitleText": "发布的商品"
}

“我的发布”页面的完成

页面使用了vant weapp中的导航栏组件和商品卡片组件，简少了我们写代码的时间，完成效果如图：

至此，我们的我的发布页面就完成了。