欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

mpvue 開發微信小程序(三)

程序员文章站 2024-02-15 14:53:28
...

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

mpvue 開發微信小程序(三)

 

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"
  }
 

}

 

相关标签: js mpvue