小程序開發（4）-詳情頁面開發

從列表跳轉到詳情頁

首先，需要給列表中的單元格增加點擊跳轉函數，寫法：@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文件夾中複製過來

在detai/index.vue中，增加如下代碼

<template>
<div>這是詳情頁</div>
</template>

現在，回到index/index.vue中，修改gotoDetail函數。

gotoDetail() {
      // 跳轉到詳情頁
      console.log("gotoDetail");
      wx.navigateTo({url: '../detail/main'})
    }

由於新建的文件，所以需要關閉npm重新運行，系統才能識別新建的文件。
效果如下

詳情頁面設計

詳情頁中，我們將採用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>

效果如下：

爲什麼和官方給的demo不一致呢？

因爲官方給的demo中，也是自定義了一些樣式的，只不過沒有給我們說！
因爲官方給的demo中，也是自定義了一些樣式的，只不過沒有給我們說！
因爲官方給的demo中，也是自定義了一些樣式的，只不過沒有給我們說！

在style代碼中，增加如下的樣式

<style>
.content {
  padding-left: 20px;
  padding-top: 5px;
  font-size: 16px;
}

.footer {
  text-align: right;
}
</style>

這下效果一致了，驚不驚喜，意不意外！！！