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>