跳至主要內容

Uniapp

OrangBus大约 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"])
}