Uniapp
大约 3 分钟
uni-refresh
onPullDownRefresh() {
this.resetData(true);
},
uni-reach
onReachBottom() {
if (this.loading) {
return;
}
if (this.isEnd) {
return;
}
this.page += 1;
this.getData();
},
uni-default-data
page: 1,
limit: 20,
list: [],
total: 0,
more: 'more', //more/loading/noMore
loading: true, //是否加载
trigger: true, // 是否下拉了
isEnd: false, // 到底了
uni-getdata
getData() {
this.loading = true;
this.more = "loading";
calList({
page: this.page,
limit: this.limit,
phone: this.phone,
type: this.tab
}).then(res => {
this.loading = false;
this.more = "more";
if (res.code === 200) {
this.list.push(...res.data);
this.backupList.push(...res.data);
if (res.data.length < 10) {
this.isEnd = true;
this.more = "noMore";
}
} else {
this.more = "noMore";
}
// 关闭下拉刷新
uni.stopPullDownRefresh();
});
},
uni-res-msg
let {code,data,msg} = res;
if (code === 200){
Message.success(msg);
}else{
Message.error(msg);
}
uni-res-data
let {code,data,msg} = res;
if (code === 200){
this.list.push(...res.data);
if (this.list.length < 10) {
this.isEnd = true;
this.more = "noMore";
}
}else{
this.more = "noMore";
Message.error(msg);
}
uni-popup
uni-tag
<uni-tag text="标签" type="$COLOR$" :inverted="$BACKCOLOR$" size="$SIZE$" />
enum("primary","success","error","error")
enum("true","false")
enum("normal","small","mini")
vuex
x-import
import {$METHODS$} from "vuex";
enum("mapState","mapState,mapMutations","mapState,mapMutations,mapActions");
x-computed
computed: {
...mapState(['callType']),
}
enum("user","customer","website");
enum("website","user");
Message.js
/**
* 消息提示
* @type {{success(string=): void, warning(string=), showToast(string=): void, error(string=), info(string=)}}
*/
const Message = {
success(msg="成功"){
uni.showToast({
title: msg,
mask: true
});
},
error(msg="错误"){
},
info(msg="提示"){
},
warning(msg="警告"){
},
showToast(msg="提示"){
uni.showToast({
title: msg,
mask: true
});
}
}
export default Message;
LocalStorage.js
/**
*
* @type {{set(*, *): void, get(*): any|{}, remove(*): void}}
*/
const LocalStorage = {
set(key,value){
uni.setStorageSync(key, value);
},
get(key){
const data = uni.getStorageSync(key);
return data ? data : null;
},
remove(key){
uni.removeStorageSync(key);
}
}
export default LocalStorage;
EnumData.js
const EnumData = {
// 本地存储变量
userLable: "user",
websiteLabel: "website",
tokenLabel: "token",
dictionaryLabel: "dictionary",
settingLabel: "setting",
userLocationLabel: "userLocation",
// 随机颜色
colorList: [
{name: "default"},
{name: "primary"},
{name: "success"},
{name: "error"},
{name: "warning"},
{name: "magenta"},
{name: "red"},
{name: "volcano"},
{name: "orange"},
{name: "gold"},
{name: "yellow"},
{name: "lime"},
{name: "green"},
{name: "cyan"},
{name: "blue"},
{name: "geekblue"},
{name: "purple"},
],
randomColor: function () {
let list = EnumData.colorList;
let index = Math.floor(Math.random() * list.length);
return list[index].name;
},
}
export default EnumData;
数据返回
res-code
let {code,msg,data} = res;
enum("code,msg,data","code,msg");
uni-res-data
let {code,msg,data} = res;
if (code === 200){
Message.success(msg);
}else{
Message.error(msg);
}
uni-submit
submit() {
this.$refs.form.validator(this.form, this.rules).then(valid => {
if (valid.isPassed) {
$methods$(_.pick(this.form, this.key)).then(res => {
let {code, msg, data} = res;
if (code === 200) {
Message.success(msg);
} else {
Message.error(msg);
}
});
} else {
}
}).catch(err => {
Message.error(err.errorMsg);
return false;
})
},
enum("userStore","articleStore")
公共方法
tableMixin.js
export default {
data() {
return {
page: 1,
limit: 10,
more: 'more', //more/loading/noMore
dataLoading: true, //是否加载
trigger: true, // 是否下拉了
isEnd: false, // 到底了
bg_color: 'rgba(13,13,13,0.6)'
}
},
// 下拉刷新
onPullDownRefresh() {
this.list = [];
this.page = 1;
this.getData();
},
// 底部加载
onReachBottom() {
if (this.loading) {
return;
}
if (this.isEnd) {
return;
}
this.page += 1;
this.getData();
},
methods: {
// 默认搜索
search(){
this.page = 1;
this.list = [];
this.getData();
},
// 如何 list的数据接口有差异,可单独复制该方法覆盖重写即可
resetData() {
this.more = "more";
this.list = [];
this.page = 1;
this.isEnd = false;
this.getData()
},
// 请求前置处理
handleDataBefore() {
if (this.dataLoading){
return false;
}
this.dataLoading = true;
},
// 处理请求数据的结果
handleDataResult(number=0,is_end=null){
this.more = "noMore";
this.dataLoading = false;
if (is_end != null){
this.isEnd = is_end;
}else{
this.isEnd = number < this.list.length;
}
console.log(this.isEnd)
// 关闭下拉刷新
uni.stopPullDownRefresh();
},
// 操作反馈提示
toastSuccess(msg = "") {
if (msg == "") {
return;
}
let options = {}
options.text = msg;
this.$refs.msg.show(options)
},
// 失败提示
toastError(msg = "") {
if (msg == "") {
return;
}
let options = {}
options.text = msg;
this.$refs.msg.show(options)
},
},
}
message.js
/**
* 消息提示
*/
const Message = {
success(msg="成功"){
uni.showToast({
icon: "success",
title: msg,
mask: true
});
},
error(msg="错误"){
uni.showToast({
icon: "error",
title: msg,
mask: true
});
},
info(msg="提示"){
uni.showToast({
icon: "info",
title: msg,
mask: true
});
},
warning(msg="警告"){
uni.showToast({
icon: "waring",
title: msg,
mask: true
});
},
showToast(msg="提示"){
uni.showToast({
icon: "success",
title: msg,
mask: true
});
}
}
export default Message;
LocalStorage.js
const LocalStorage = {
set(key,value){
return uni.setStorageSync(key, JSON.stringify(value));
},
get(key){
const data = uni.getStorageSync(key);
return data ? JSON.parse(data) : null;
},
remove(key){
return uni.removeStorageSync(key);
}
}
export default LocalStorage;
使用注意事项
1、默认所有的页面已经处理了滚动加载,下拉刷新
2、阻止滚动加载,不需要滚动加载的时候
isEnd:true,
3、阻止下拉刷新(pages.json)文件中
"enablePullDownRefresh": false
默认方法
1、获取数据
this.getData();
2、下拉刷新默认执行方法
this.getData();
3、列表获取默认方法
请求前置操作
this.handleDataBefore();
请求后置操作
this.handleDataResult(0,true);
vuex数据获取方式
computed: {
...mapState("user", ["user"])
}