1. 創(chuàng)建分包和引入頁面
- 新增目錄
pages_goods - 在
pages.json添加
"subPackages": [ // 分包
{
"root": "pages_goods",
"pages": []
}
],
- 新建頁面
圖片.png
2. 開發(fā)列表頁
2.1 頁面開發(fā)
1. 開發(fā)導(dǎo)航欄
在 category/list/list.vue
<template>
<view>
<lucky-tab-nav show_number :tab_nav_list="nav_bars" active_color="#1F4037" :tab_index="nav_index"
@change_nav="click_nav" item_align="space-around" :show_sort="false"></lucky-tab-nav>
</view>
</template>
<script>
export default {
data() {
return {
nav_index: 0,
nav_bars: [
{
title: "全部分類",
type: null,
number: 0,
list: [],
page: 1,
size: 20,
refreshing: false,
load_more_status: 'more',
},
{
title: "關(guān)聯(lián)商品",
type: "goods",
number: 0,
list: [],
page: 1,
size: 20,
refreshing: false,
load_more_status: 'more',
}, {
title: "關(guān)聯(lián)促銷",
type: "promotion",
number: 0,
list: [],
page: 1,
size: 20,
refreshing: false,
load_more_status: 'more',
}
]
};
}
}
</script>
效果圖
圖片.png
2. 接入接口
在api下新建 goods 文件夾蔽挠，在goods新建index.js和category.js
在 index.js 中：
import category from 'category.js'
export default {
category
}
在 category.js 中：
import request from "@/util/request.js"
const app = 'goods'
// 詳情 商品分類
function detail_goods_category(param){
param.api = '/'+app+'/detail_goods_category'
param.app = app
param.name = '詳情 商品分類'
request.post_json_request(param)
}
// 查詢 商品分類
function search_goods_category(param){
param.api = '/'+app+'/search_goods_category'
param.app = app
param.name = '查詢 商品分類'
request.post_json_request(param)
}
// 保存 商品分類
function save_goods_category(param){
param.api = '/'+app+'/save_goods_category'
param.app = app
param.name = '保存 商品分類'
request.post_json_request(param)
}
export default {
detail_goods_category,
save_goods_category,
search_goods_category
}
在pages_goods/category/list.vue中接入接口
<script>
export default {
onShow() {
this.load_data('refresh')
},
methods: {
load_data(type){
this.$app_api.goods.category.search_goods_category({
data: {},
success: res=>{
}
})
}
}
}
</script>
將 env/index.js 中的默認(rèn)環(huán)境改為dev
let env = env_dev // 默認(rèn)是 生產(chǎn)環(huán)境
function setup_app_env() {
let envType = uni.getStorageSync(app_define.ENV_TYPE)
if (envType == undefined) {
之前沒有設(shè)置過
this.main_host = env_dev.main_host
this.cen_host = env_dev.cen_host
}
}
查詢商品分類的接口已經(jīng)請(qǐng)求成功:
請(qǐng)求成功.png
3. 聯(lián)調(diào)數(shù)據(jù)
在 list.vue 中：
<template>
<view>
<!-- 分頁滑動(dòng)欄 -->
<swiper class="nav-swiper" :current="nav_index" @change="nav_swiper_change">
<swiper-item v-for="(nav_item, index_nav) in nav_bars" :key="index_nav">
<scroll-view
scroll-y
style="height: 100%;"
@scrolltolower="load_data('load')"
@refresherrefresh="load_data('refresh')"
:refresher-triggered="nav_item.refreshing"
refresher-enabled
>
<view class="category-cell" v-for="(item, index) in nav_item.list" :key="index">
<text>{{ item.name }}</text>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
methods: {
click_nav(index) {
this.switch_tab(index);
},
nav_swiper_change(e) {
let index = e.target.current || e.detail.current;
this.switch_tab(index);
},
switch_tab(index) {
if (this.nav_index === index) return;
this.nav_index = index;
if (this.nav_bars[this.nav_index].list.length == 0) {
this.load_data('refresh');
}
},
load_before_data(nav_item, type) {
if (type == 'load' && nav_item.load_more_status == 'noMore') {
return 'break';
}
if (type == 'refresh' && nav_item.load_more_status == 'loading') {
return 'break';
}
if (type == 'refresh') {
nav_item.page = 1;
nav_item.refreshing = true;
}
if (type == 'load') {
nav_item.page = nav_item.page + 1;
}
nav_item.load_more_status = 'loading';
return 'continue';
},
load_after_data(nav_item, type, list) {
if (type == 'refresh') {
nav_item.list = list;
nav_item.refreshing = false;
uni.stopPullDownRefresh();
}
if (type == 'load') {
nav_item.list = nav_item.list.concat(list);
}
if (list.length < nav_item.size) {
nav_item.load_more_status = 'noMore';
} else {
nav_item.load_more_status = 'more';
}
},
load_data(type){
let nav_item = this.nav_bars[this.nav_index];
let flag = this.load_before_data(nav_item, type);
if (flag == 'break') {
return;
}
let param = {
page: nav_item.page,
size: nav_item.size
};
this.$app_api.goods.category.search_goods_category({
data: param,
success: res => {
let list = res.data.data;
this.load_after_data(nav_item, type, list);
},
complete: () => {
setTimeout(function() {
uni.stopPullDownRefresh();
nav_item.refreshing = false;
}, 200);
}
})
}
}
}
</script>
<style lang="scss">
.category-cell {
margin: 30rpx;
padding: 20rpx;
border-radius: 20rpx;
background: #F8F8F8;
box-shadow: 5px 5px 10px #d3d3d3,
-5px 5px 10px #ffffff;
}
.nav-swiper {
flex-grow: 1;
display: flex;
flex-direction: column;
swiper-item {
flex-grow: 1;
}
}
</style>
效果圖：
圖片.png
4. 添加功能按鈕
頁面腳部功能按鈕
<template>
<view>
<lucky-footer-action>
<lucky-footer-item title="新增分類" @click=""></lucky-footer-item>
</lucky-footer-action>
</view>
</template>
列表項(xiàng)功能按鈕
