小程序开发（4）-详情页面开发

比眉伴天荒 2023-07-18 02:36 25阅读 0赞

## 从列表跳转到详情页 ##

首先，需要给列表中的单元格增加点击跳转函数，写法：@click=“gotoDetail”

<van-cell
          v-for="(item, index) in listData"
          :key="index"
          :title="item.title"
          :value="item.value"
          :label="item.label"
          :border="false"
          @click="gotoDetail"
        />

然后在methods里面，增加函数实现

methods: {
        fun() {
          //  更新数据
          this.listData = List.list_data;
          this.ilist();
        },
        ilist() {
          console.log(this.listData);
        },
        gotoDetail() {
          // 跳转到详情页
          console.log("gotoDetail");
        }
      }

接下来，我们在pages文件夹里面，新建detail文件夹，里面创建index.vue,main.js,main.json三个文件。这三个文件，可以从index文件夹中复制过来  
![在这里插入图片描述][20200323154648899.png]  
在detai/index.vue中，增加如下代码

<template>
    <div>这是详情页</div>
    </template>

现在，回到index/index.vue中，修改gotoDetail函数。

gotoDetail() {
          // 跳转到详情页
          console.log("gotoDetail");
          wx.navigateTo({url: '../detail/main'})
        }

由于新建的文件，所以需要关闭npm重新运行，系统才能识别新建的文件。  
效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70]

## 详情页面设计 ##

详情页中，我们将采用vant-weapp中的面板进行设计。

main.json中，加载panel组件

{
        "usingComponents": {
          "v-panel": "../../static/vant-weapp/panel/index"
        }
    }

然后在将官方给的代码拷贝到detail/index.vue中，将对应的标签名修改成我们写的标签名。

<v-panel title="标题" desc="描述信息" status="状态" use-footer-slot>
        <view>内容</view>
        <view slot="footer">
          <v-button size="small">按钮</v-button>
          <v-button size="small" type="danger">按钮</v-button>
        </view>
      </v-panel>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70 1]

为什么和官方给的demo不一致呢？

因为官方给的demo中，也是自定义了一些样式的，只不过没有给我们说！  
因为官方给的demo中，也是自定义了一些样式的，只不过没有给我们说！  
因为官方给的demo中，也是自定义了一些样式的，只不过没有给我们说！

在style代码中，增加如下的样式

这下效果一致了，惊不惊喜，意不意外！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70 2]

[20200323154648899.png]: /images/20230528/69e9eefbf3334ce4a6e79c43edc9c60e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70]: /images/20230528/f46b0ec156044c7aa58783513262e065.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70 1]: /images/20230528/77093fdba13d4242b6572c6aae3081a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70 2]: /images/20230528/10f0068f4c9f41b0b918541492a2422f.png