mpvue 開發微信小程序(三)
程序员文章站
2024-02-15 14:53:28
...
要實現如下頁面,那麼在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"
}
}
上一篇: vue 全局样式引用
下一篇: mpvue 開發微信小程序(一)