mpvue 開發微信小程序(三)home頁面和跳轉到詳情頁面

本文介绍了如何使用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"
  }
 

}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值