当前位置：首页 > news >正文

uni-app 使用笔记

news 2025/1/7 19:12:39

1.缓存用法

（1）uni-app 存值+取值+删除

官网：https://uniapp.dcloud.net.cn/api/storage/storage.html#setstorage
存值

uni.setStorageSync('storage_key', 'hello');

取值

uni.getStorageSync('storage_key')

删除

uni.removeStorageSync('storage_key')

2.列表左侧点击访问详情，右侧点击处理业务

（1）效果

在这里插入图片描述

(2)代码

<template><uni-list><uni-list-item v-for="item in hospitalJobRequireList" :title="item.hosName" :note="item.jobName" clickable @click="onClick(item)"><template v-slot:footer v-if="item.isGw=='N'"><button style="height: 45px;width: 100px;" class="uni-icon yticon icon-shanchu" @click.stop="rightClick(item)">岗位申请</button></template></uni-list-item></uni-list>
</template><script>
import {applyList} from "@/api/expertVeteran/hospital";export default {data() {return {hospitalJobRequireList: [],// 查询参数queryParams: {pageNum: 1,pageSize: 10,hospitalId: null,jobName: null,num: null,description: null,professionalRequire: null,eduRequire: null,postRequire: null,salary: null,contact: null,phone: null,email: null,workLocation: null,status: null,sort: null,},}},created(){this.getList();},methods:{/** 查询医院岗位需求列表 */getList() {this.$modal.loading("数据加载中...")applyList(this.queryParams).then(response => {console.log(response)this.hospitalJobRequireList = response.rows;this.$modal.closeLoading();});},onClick(data){this.$tab.navigateTo(`/pages/expertVeteran/hospital/job/detail?id=${data.id}`)},rightClick(){this.$modal.showToast('点击右侧按钮调用')}}
}
</script><style>
/* 样式按需添加 */
.uni-icon {margin-right: 10px; /* 调整右侧图标与文字的间隔 */
}
</style>

参考：
https://uniapp.dcloud.net.cn/component/uniui/uni-list.html#listitem-slots
百度ai
在这里插入图片描述

3.动态设置页面标题(NavigationBarTitle)

onLoad(event) {uni.setNavigationBarTitle({title:'顶顶顶顶顶'});this.getInfo(event.id)
},

4.列表下拉刷新，下拉加载

<template><uni-list><uni-list-item v-for="item in hospitalJobRequireList" :title="item.hosName" :note="item.jobName" clickable @click="onClick(item)"><template v-slot:footer v-if="item.isGw=='N'"><button style="height: 45px;width: 100px;" class="uni-icon yticon icon-shanchu" @click.stop="onClick(item)">岗位申请</button></template></uni-list-item><uni-load-more :status="status" @clickLoadMore="loadMore"></uni-load-more></uni-list>
</template><script>
import {applyList} from "@/api/expertVeteran/hospital";export default {data() {return {hospitalJobRequireList: [],total:0,status:'more',// 查询参数queryParams: {pageNum: 1,pageSize: 10,},}},created(){this.getList();},//下拉刷新onPullDownRefresh() {this.hospitalJobRequireList=[];this.queryParams.pageNum=1;this.queryParams.pageSize=10;this.status='more';this.getList();setTimeout(function() {uni.stopPullDownRefresh();}, 1000);},methods:{/** 查询医院岗位需求列表 */getList() {this.$modal.loading("数据加载中...")applyList(this.queryParams).then(response => {this.hospitalJobRequireList=this.hospitalJobRequireList.concat(response.rows);this.total = response.total;if (this.hospitalJobRequireList.length>=this.total){this.status='noMore';}this.$modal.closeLoading();});},onClick(data){this.$tab.navigateTo(`/pages/expertVeteran/hospital/job/detail?id=${data.id}`)},loadMore(){if (this.status=='more'){this.queryParams.pageNum++;this.getList();}},}
}
</script><style>
/* 样式按需添加 */
.uni-icon {margin-right: 10px; /* 调整右侧图标与文字的间隔 */
}
</style>