1. 创建分包和引入页面
- 新增目录
pages_goods - 在
pages.json添加
"subPackages": [ // 分包
{
"root": "pages_goods",
"pages": []
}
],
- 新建页面
图片.png
2. 开发列表页
2.1 页面开发
1. 开发导航栏
在 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: "关联商品",
type: "goods",
number: 0,
list: [],
page: 1,
size: 20,
refreshing: false,
load_more_status: 'more',
}, {
title: "关联促销",
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 中的默认环境改为dev
let env = env_dev // 默认是 生产环境
function setup_app_env() {
let envType = uni.getStorageSync(app_define.ENV_TYPE)
if (envType == undefined) {
之前没有设置过
this.main_host = env_dev.main_host
this.cen_host = env_dev.cen_host
}
}
查询商品分类的接口已经请求成功:
请求成功.png
3. 联调数据
在 list.vue 中：
<template>
<view>
<!-- 分页滑动栏 -->
<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>
列表项功能按钮
网友评论