Uniapp-方法汇总

uniapp中常用方法

• 常用弹框

Toast 提示框

<template>
  <view>
    <button @click="showToast">显示Toast</button>
  </view>
</template>

<script>
export default {
  methods: {
    showToast() {
      uni.showToast({
        title: '这是一个Toast提示',
        icon: 'none',
        duration: 2000
      });
    }
  }
};
</script>

Loading 加载框

<template>
  <view>
    <button @click="showLoading">显示Loading</button>
    <uni-loading :show="loadingShow" text="加载中..."></uni-loading>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadingShow: false
    };
  },
  methods: {
    showLoading() {
      this.loadingShow = true;
      setTimeout(() => {
        this.loadingShow = false;
      }, 2000);
    }
  }
};
</script>

ActionSheet 操作菜单

<template>
  <view>
    <button @click="showActionSheet">显示ActionSheet</button>
    <uni-actionsheet :show="actionSheetShow" @click="handleActionSheetClick" :actions="actions"></uni-actionsheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      actionSheetShow: false,
      actions: [
        { text: '选项一' },
        { text: '选项二' },
        { text: '取消', style: 'color: red;' }
      ]
    };
  },
  methods: {
    showActionSheet() {
      this.actionSheetShow = true;
    },
    handleActionSheetClick(index) {
      console.log(`点击了第 ${index} 个选项`);
      this.actionSheetShow = false;
    }
  }
};
</script>

• 存储 & 获取

// 存储数据
uni.setStorageSync('username', 'John Doe');
uni.setStorageSync('age', 30);

// 获取数据
let username = uni.getStorageSync('username');
let age = uni.getStorageSync('age');

console.log(username); // 输出 'John Doe'
console.log(age);      // 输出 30

欢迎光临我的个人博客

网址：https://liukang.vip