uni-app 使用笔记

1.缓存用法

(1)uni-app 存值+取值+删除

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

存值

js 复制代码
uni.setStorageSync('storage_key', 'hello');

取值

js 复制代码
uni.getStorageSync('storage_key')

删除

js 复制代码
uni.removeStorageSync('storage_key')

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

(1)效果

(2)代码

html 复制代码
<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)

js 复制代码
onLoad(event) {
  uni.setNavigationBarTitle({
    title:'顶顶顶顶顶'
  });
  this.getInfo(event.id)
},

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

html 复制代码
<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>
相关推荐
zyxzyx66640 分钟前
Flyway 介绍以及与 Spring Boot 集成指南
spring boot·笔记
西岭千秋雪_2 小时前
Redis性能优化
数据库·redis·笔记·学习·缓存·性能优化
HuashuiMu花水木3 小时前
Matplotlib笔记4----------图像处理
图像处理·笔记·matplotlib
DES 仿真实践家4 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
IMPYLH10 小时前
Python 的内置函数 reversed
笔记·python
ysa05103013 小时前
数论基础知识和模板
数据结构·c++·笔记·算法
今天背单词了吗98014 小时前
算法学习笔记:7.Dijkstra 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·开发语言·数据结构·笔记·算法
mitt_14 小时前
《人生顶层设计》读书笔记7
笔记
智者知已应修善业14 小时前
【51单片机节日彩灯控制器设计】2022-6-11
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机