uni_template
v1.0.0
Published
a uniapp template
Downloads
1
Readme
uni_template
基于uView1.5.2搭建的快速开发模板
数据存储
提供vuex
、globalData
、Storage
三种存储方式
vuex
/store/mixin.js
文件向所有页面,组件注入了vuex中不包含modules的内容
因此,可以直接在页面中使用vuex中的内容
修改vuex内容
/store/mixin.js
中同样挂在了修改方法
如需要修改vuex中的token字段,可使用this.$u.vuex('token', 'xxxx')
如需修改vuex中的user对象中的name字段,可使用this.$u.vuex('user.name', '张三')
如需修改vuex中module下的text中的ts字段,可使用this.$u.vuex('text.ts', 'xxx')
globalData
globalData
存储的是全局变量,调用方式为
getApp().globalData.token
Storage
完全遵循uni
的Storage
规则
http请求
/common/js/http.interceptor.js
设置了请求配置、请求拦截器、响应拦截器
/common/js/http.api.js
可以配置全局请求api**(尚未全局注册)**,如需注册,请解开/main.js
第34,35行注释
多语言
多语言使用了vue-i18n
插件,/common/js/international.js
可以配置各种语言(尚未全局注册),如需注册,请解开/main.js
第3,20,25行注释。
使用方法:
- 可以在
template
中直接使用{{ $t('index').game }}
- 也可以使用
计算属性
,computed: { index() { return this.$t('index') } }
暗黑模式(会出现闪现问题)
vuex
中的themeStyle
可取值white
、black
,即对应的正常模式
、暗黑模式
开发中请尽量使用css变量
如需使用换肤,可解开/store/mixin.js
中第36,44行代码
关于下拉刷新,上拉加载
使用了mescroll 1.3.0
版本
使用刷新,加载组件,必须在页面引入mixin
文件
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin]
}
单个
页面使用单个下拉刷新的话,可以使用page-view
组件
<template>
<page-view isScroll tabbar @up="upCallback" @down="downCallback">
<block v-for="(item, idx) in list" :key="idx">
<view>{{ item }}</view>
</block>
</page-view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin],
data() {
return {
list: []
}
},
methods: {
upCallback(page) {
this.getData(page.num)
.then(res => {
this.mescroll.endSuccess(res.length, res.next)
})
},
downCallback() {
// 将page.num重置为1,并执行一遍upCallback
this.mescroll.resetUpScroll()
},
getData(page) {
return new Promise(resolve => {
this.$u.post('/xxx', {
page: page,
count: 10
}).then(res => {
const list = res.data.list
page == 1 && (this.list = [])
this.list = this.list.concat(list)
resolve({
lenght: list.length, // 当前页面数据长度
next: res.data.next // 下一页是否还有数据
})
})
})
}
}
}
</script>
多个
类似交易记录页面,会有topbar,待付款、待发货、代签收、已完成等等,这种页面处理刷新需要多个
<!-- 主页面 -->
<template>
<page-view>
<view class="u-tabs-box fixed-t">
<u-tabs
ref="tabs"
:activeColor="themeColor"
:list="tabs"
:current="tabCurrent"
@change="tabChange"
:is-scroll="false"
swiperWidth="750"
class="u-border-bottom"
></u-tabs>
</view>
<!-- 待付款 -->
<record-item ref="mescrollItem0" :i="0" :index="tabCurrent" :tabs="tabs"></record-item>
<!-- 待发货 -->
<record-item ref="mescrollItem1" :i="1" :index="tabCurrent" :tabs="tabs"></record-item>
<!-- 待收货 -->
<record-item ref="mescrollItem2" :i="2" :index="tabCurrent" :tabs="tabs"></record-item>
<!-- 已完成 -->
<record-item ref="mescrollItem3" :i="3" :index="tabCurrent" :tabs="tabs"></record-item>
</page-view>
</template>
<script>
import RecordItem from './record-item.vue'
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js"; // 必须
export default {
components: {
RecordItem
},
mixins: [MescrollMoreMixin], // 必须
data() {
return {
tabs: [
{ name: '待付款' },
{ name: '待发货' },
{ name: '待收货' },
{ name: '已完成' },
],
tabCurrent: 0,
};
},
methods: {
tabChange(index) {
this.tabCurrent = index
}
}
}
</script>
RecordItem
组件(具体请求方法,和单个的相同)
<template>
<!-- 不能用v-if (i: 每个tab页的专属下标; index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
<view v-show="i === index">
<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
<!-- height="" -->
<mescroll-body
ref="mescrollRef"
@init="mescrollInit"
top="80"
:down="downOption"
@down="downCallback"
:up="upOption"
@up="upCallback">
<!-- 渲染区域 -->
</mescroll-body>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
export default {
mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
props:{
i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
type: Number,
default(){
return 0
}
},
tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
type: Array,
default(){
return []
}
}
},
data() {
return {
downOption:{
auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
},
upOption:{
auto:false, // 不自动加载
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
},
list: []
}
},
}
</script>