1力图、項(xiàng)目頁面基本配置（pages.json 文件的 配置）
pages.json 文件用來對 uni-app 進(jìn)行全局配置步绸，決定頁面文件的路徑、窗口樣式吃媒、原生的導(dǎo)航欄靡努、底部的原生tabbar 等。
常用配置項(xiàng)
| 屬性 | 類型 | 必填 | 描述 | 平臺(tái)兼容 |
|---|---|---|---|---|
| globalStyle | Object | 否 | 設(shè)置默認(rèn)頁面的窗口表現(xiàn) | |
| pages | Object Array | 是 | 設(shè)置頁面路徑及窗口表現(xiàn) | |
| tabBar | Object | 否 | 設(shè)置底部 tab 的表現(xiàn) |
更多請參考官網(wǎng)詳解：
https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle
主要在pages.json 中配置了pages 晓折、 globalStyle 、 tabBar 三項(xiàng)兽泄。預(yù)覽效果如下：
基本配置后預(yù)覽效果圖
pages.json 代碼如下：
{
//單頁配置
"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁漓概，參考：https://uniapp.dcloud.io/collocation/pages
// pages內(nèi)個(gè)性化定義頁面配置，最上面為首頁
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "勵(lì)志大學(xué)堂"
}
},
{
"path" : "pages/cates/cates",
"style" :
{
"navigationBarTitleText" : "分類",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/cars/cars",
"style" :
{
"navigationBarTitleText" : "購物車",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/mine/mine",
"style" :
{
"navigationBarTitleText" : "個(gè)人中心",
"enablePullDownRefresh" : false
}
}
],
//全局頁面配置
"globalStyle": { //項(xiàng)目全局樣式病梢，如果某個(gè)頁面沒有單獨(dú)定義樣式胃珍，則默認(rèn)使用全局樣式
"navigationBarTextStyle": "white", //默認(rèn) 頁面標(biāo)題顏色，只能設(shè)置 黑色或者白色
"navigationBarTitleText": "大學(xué)堂",//默認(rèn)頁面標(biāo)題內(nèi)容
"navigationBarBackgroundColor": "#ff4400", //默認(rèn)頁面標(biāo)題背景顏色
"backgroundColor": "#F8F8F8",
//"navigationStyle":"custom" //默認(rèn)default 為custom時(shí)蜓陌，頁面頂部標(biāo)題不顯示
"titleImage":"static/logo4.png" //頂部標(biāo)題圖片替換文字 觅彰，當(dāng)設(shè)置圖片后 ‘navigationBarTitleText’失效
},
"tabBar": {
"color": "#333", //頁面名稱默認(rèn)文本顏色
"selectedColor": "#ff4400", //被選中時(shí) 頁面名稱文本 顏色
"list": [ //list數(shù)組內(nèi)包含 底部導(dǎo)航對象
{
"pagePath": "pages/index/index", //頁面路徑 不要加 ‘ ./ ’
"text": "首頁", //頁面名稱 文字
"iconPath": "../static/tabbar-index.png", //頁面圖標(biāo)路徑
"selectedIconPath": "../static/tabbar-index-active.png" //活動(dòng)時(shí) 頁面圖標(biāo)路徑
},
{
"pagePath": "pages/cates/cates",
"text": "首頁",
"iconPath": "../static/tabbar-cate.png",
"selectedIconPath": "../static/tabbar-cate-active.png"
},
{
"pagePath": "pages/cars/cars",
"text": "首頁",
"iconPath": "../static/tabbar-car.png",
"selectedIconPath": "../static/tabbar-car-active.png"
},
{
"pagePath": "pages/mine/mine",
"text": "首頁",
"iconPath": "../static/tabbar-mine.png",
"selectedIconPath": "../static/tabbar-mine-active.png"
}
]
},
"uniIdRouter": {}
}
2、首頁制作
（1）搜索欄制作
UI框架：uView 2.0組件
組件名稱：Search 搜索
參考官網(wǎng)教程及代碼：https://www.uviewui.com/components/search.html
<template>
<u-search placeholder="日照香爐生紫煙" v-model="keyword"></u-search>
</template>
<script>
export default {
data() {
return {
keyword: '遙看瀑布掛前川'
}
}
}
</script>
index.vue代碼如下：
<template>
<view class="content">
<view class="search">
<u-search
searchIconColor="#ff4400"
searchIconSize="30"
shape="round"
placeholder="請輸入搜索內(nèi)容"
margin="20rpx"
height="72rpx"
:showAction="false"
@clickIcon = "mySearch"
v-model="keywords"></u-search>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keywords:''
}
},
methods: {
mySearch(){
console.log("搜索內(nèi)容是："+ this.keywords)
}
}
}
</script>
<style lang="scss">
.content {
.search{
width: 100%;
}
}
</style>
（2）輪播圖制作
UI框架：uView 2.0組件
組件名稱：輪播圖
參考官網(wǎng)網(wǎng)址：https://www.uviewui.com/components/swiper.html
基本使用
通過list參數(shù)傳入輪播圖列表值钮热，該值為一個(gè)數(shù)組填抬，鍵值為圖片路徑，例如：
<template>
<u-swiper
:list="list1"
@change="change"
@click="click"
></u-swiper>
</template>
<script>
export default {
data() {
return {
list1: [
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
]
}
}
}
</script>
本例通過在線獲取服務(wù)器輪播圖資源渲染到頁面隧期。
<template>
<view class="content">
<view class="search">
<u-search
searchIconColor="#ff4400"
searchIconSize="30"
shape="round"
placeholder="請輸入搜索內(nèi)容"
margin="20rpx"
height="72rpx"
:showAction="false"
@clickIcon = "mySearch"
v-model="keywords"></u-search>
</view>
<!--輪播圖 banner_list -->
<view>
<u-swiper
class="u-swiper"
indicator
indicatorActiveColor="red"
indicatorInactiveColor="#ddd"
indicatorMode="dot"
:height="160"
interval="2000"
:list="banner_list"></u-swiper>
</view>
<view>123</view>
</view>
</template>
<script>
export default {
data() {
return {
keywords:'',
banner_list:[] //輪播圖數(shù)據(jù)-初始化
}
},
mounted() {
this.getBannerData(); //頁面加載完成后飒责，獲取輪播圖數(shù)據(jù)
},
methods: {
mySearch(){
console.log("搜索內(nèi)容是："+ this.keywords)
},
getBannerData(){
uni.request({
url: 'http://139.196.29.250:8080/wx/home/index', //index頁面數(shù)據(jù) api
method: 'GET',
success: ({data}) => {
// console.log(data);
this.banner_list = data.data.banner;
this.banner_list= data.data.banner;
console.log(this.banner_list)
},
fail: () => {},
complete: () => {}
});
}
}
}
</script>
<style lang="scss">
.content {
.search{
width: 100%;
}
.u-swiper{
}
}
</style>
針對上面代碼中uView組件相關(guān)屬性解釋如下圖所示：
uView組件輪播圖常用屬性解釋
（3）宮格圖片導(dǎo)航制作
UI框架：uView 2.0組件
組件名稱：Grid宮格組件
參考官網(wǎng)網(wǎng)址：https://www.uviewui.com/components/grid.html
基本使用
通過list參數(shù)傳入輪播圖列表值，該值為一個(gè)數(shù)組仆潮，鍵值為圖片路徑宏蛉，例如
Grid Props
| 參數(shù) | 說明 | 類型 | 默認(rèn)值 | 可選值 | |
|---|---|---|---|---|---|
| col | 宮格的列數(shù) | String | Number | 3 | - |
| border | 是否顯示宮格的邊框 | Boolean | true | false | |
| align | 宮格的對齊方式，用于控制只有一兩個(gè)宮格時(shí)的對齊場景 | String | left | center / right |
Grid-item Props
| 參數(shù) | 說明 | 類型 | 默認(rèn)值 | 可選值 | |
|---|---|---|---|---|---|
| name | 宮格的name | String | Number | - | - |
| bgColor | 宮格的背景顏色 | String | transparent(背景透明) | - |
Grid Event
注意：請?jiān)?code><u-grid></u-grid>上監(jiān)聽此事件
| 事件名 | 說明 | 回調(diào)參數(shù) |
|---|---|---|
| click | 點(diǎn)擊宮格觸發(fā) | name |
Grid-item Event
注意：請?jiān)?code><u-grid-item></u-grid-item>上監(jiān)聽此事件
| 事件名 | 說明 | 回調(diào)參數(shù) |
|---|---|---|
| click | 點(diǎn)擊宮格觸發(fā) | name |
預(yù)覽效果圖如下：
宮格圖片導(dǎo)航效果圖
項(xiàng)目目錄
index.vue代碼如下：
<template>
<view class="content">
<view class="search">
<u-search
searchIconColor="#ff4400"
searchIconSize="30"
shape="round"
placeholder="請輸入搜索內(nèi)容"
margin="20rpx"
height="72rpx"
:showAction="false"
@clickIcon = "mySearch"
v-model="keywords"></u-search>
</view>
<!--輪播圖 banner_list -->
<view>
<u-swiper
class="u-swiper"
indicator
indicatorActiveColor="red"
indicatorInactiveColor="#ddd"
indicatorMode="dot"
:height="160"
interval="2000"
:list="banner_list"></u-swiper>
</view>
<!-- 宮格 圖片導(dǎo)航 -->
<view>
<u-grid
:border="false"
col="5"
>
<u-grid-item
class="u-grid-item"
v-for="(listItem,listIndex) in imgNavList"
:key="listIndex"
@click="gridClick"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="listItem.iconUrl"
:size="40"
></u-icon>
<text class="grid-text"> {{listItem.name}}</text>
</u-grid-item>
</u-grid>
<u-toast ref="uToast" />
</view>
<u-toast class="u-toast" ref="uToast" /> <!-- 提示信息 -->
</view>
</template>
<script>
export default {
data() {
return {
keywords:'',
banner_list:[] ,//輪播圖數(shù)據(jù)-初始化
imgNavList:[] //宮格圖片導(dǎo)航數(shù)據(jù)-初始化
}
},
mounted() {
this.getBannerData(); //頁面加載完成后性置，獲取輪播圖數(shù)據(jù)
},
methods: {
mySearch(){
console.log("搜索內(nèi)容是："+ this.keywords)
},
getBannerData(){
uni.request({
url: 'http://139.196.29.250:8080/wx/home/index', //index頁面數(shù)據(jù) api
method: 'GET',
success: ({data}) => {
// console.log(data);
//banner
this.banner_list = data.data.banner;
this.banner_list= data.data.banner;
// console.log(this.banner_list)
//宮格 圖片導(dǎo)航
console.log(data)
this.imgNavList = data.data.channel
},
fail: () => {},
complete: () => {}
});
},
// 宮格 圖片導(dǎo)航 鼠標(biāo)單擊響應(yīng)
gridClick(e){
console.log(e)
switch (e){
case 0: //居家
console.log(this.$router)
// this.$router.push('/pages/case_nav/case_jvjia/case_jvjia'); 小程序頁面報(bào)錯(cuò)
uni.navigateTo({ //跳轉(zhuǎn)指定頁面
url: '/pages/case_nav/case_jvjia/case_jvjia'
});
break;
case 1: //餐廚
uni.navigateTo({ //跳轉(zhuǎn)指定頁面
url: '/pages/case_nav/canchu/canchu'
});
break;
case 2: //飲食
uni.navigateTo({ //跳轉(zhuǎn)指定頁面
url: '/pages/case_nav/yinshi/yinshi'
});
break;
case 3: //配件
uni.navigateTo({ //跳轉(zhuǎn)指定頁面
url: '/pages/case_nav/peijian/peijian'
});
break;
case 4: //服裝
uni.navigateTo({ //跳轉(zhuǎn)指定頁面
url: '/pages/case_nav/fuzhuang/fuzhuang'
});
break;
default: //其他
this.$refs.uToast.success(`點(diǎn)擊了第${e+1}個(gè)`);
break;
}
}
}
}
</script>
<style lang="scss">
.content {
.search{
width: 100%;
}
.u-swiper{
}
.u-grid-item{
margin-top: 20rpx;
.grid-text{
font-size: 24rpx;
margin-top: 20rpx;
color: #333;
}
}
.u-toast{
background-color: red !important;
}
}
</style>
