mpvue 開發微信小程序（三）home頁面和跳轉到詳情頁面-优快云博客

本文链接：https://blog.youkuaiyun.com/software20121216/article/details/103512405

本文介绍了如何使用mpvue框架在微信小程序中创建首页和跳转到详情页。主要内容包括在pages目录下创建home文件夹，包含main.js、main.json和Home.vue三个文件，Home.vue用于显示页面，main.js进行组件挂载，main.json配置导航栏，同时app.json需要更新pages_list和tabbar设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要實現如下頁面，那麼在pages 下面新建一個home文件夾，home下面新建main.js & main.json & Home.vue三個文件

Home.vue

<template>
  <div class="home">
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
    <block v-for="(item, index) in items" :index="index" :key="key">
        <swiper-item>
            <image :src="item.url" class="slide-image" mode="aspectFill"/>
        </swiper-item>
    </block>
</swiper>
<div class="feature">
    <div class="feature-item" v-for="(item,index) in features" @click="featureClick(index)">
    <img src="/static/images/timg.jpeg" alt="">
    <span>{{item.title}}</span>
  </div>
  </div>

<div class="tab-control">
    <!-- if you click the first tab ,index =0, -->
    <div v-for="(item,index) in title" @click="tabClick(index)" class="tab-control-item" :class="{active:index === currentIndex}">
      <span>{{item}}</span> 
    </div>
  </div>   
  </div>
</template>

main.js掛載（千萬別忘記）

import Vue from 'vue'
import Home from './Home.vue'


Vue.config.productionTip = false
Home.myType = 'home'


const home = new Vue(Home)
home.$mount()

main.json 設置導航欄

{
  "navigationBarTitleText":"首頁",
  "navigationBarBackgroundColor":"#8ed145"
}

app.json需要配置pages_list 和tabbar

{
  "pages":[
    "pages/index/main",
    "pages/home/main",
    
    
    "pages/arrival/main",
    "pages/profile/main",
    "pages/detail/main"
    
  ],
  "tabBar": {
    "color": "#999",
    "backgroundColor": "#fafafa",
    "selectedColor": "#333",
    "borderStyle": "white",

    "list": [{
      "text": "首页",
      "pagePath": "pages/home/main",
      "iconPath": "static/tabs/home.png",
      "selectedIconPath": "static/tabs/home-active.png"
    }, {
      "text": "到店",
      "pagePath": "pages/arrival/main",
      "iconPath": "static/tabs/orders.png",
      "selectedIconPath": "static/tabs/orders-active.png"
    }
    , {
      "text": "我的",
      "pagePath": "pages/profile/main",
      "iconPath": "static/tabs/我的.png",
      "selectedIconPath": "static/tabs/我的_active.png"
    }
  ],

   
    "position": "bottom"
  }
 

}