• uniapp 组件 和 API

    目录

    1 组件

    1.1 导航栏

    1.1.1 原生导航栏

    为原生导航栏增加左侧右侧按钮或文字，在 app-plus 中添加配置

    "app-plus": {
	"titleNView": {
		"titleSize": "26rpx",
		"titleColor": "#393939",
		"autoBackButton": true,
		"splitLine": "undefined",
		"thtleHeight": "40rpx",
		"buttons": [{ // 右侧操作按钮样式定义,是以数组形式定义，可定义多个
			"color": "#393939",
			"text": "欢迎您，",
			"fontSize": "20rpx",
			"float":"right"
			"type":"back"// 按钮类型
		}]
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    1.1.2 自定义导航栏

    原生导航栏无法满足需求时，使用 uni_modules 扩展插件 uni-nav-bar 或者 自定义导航栏

    • 使用前需隐藏原生导航栏 "navigationStyle":"custom"
    • 组成部分
      • 左：一般为回退按钮，可添加文字
      • 中：标题
      • 右：按钮，文字
    • 自定义导航栏样式上要设置成：固定 position: fixed;、置于顶层 z-index: 9999;、有背景颜色

    1.2 弹窗

    uniapp 弹出控件

    1.2.1 原生弹窗

    // 点击事件后
uni.showModal({
  title: "提示",
  content: "确认要提交吗？",
  showCancel: true, // 有无取消按钮
  success: function (res) {
    if (res.confirm) {
      console.log("点击了确定");
    } else {
      console.log("点击了取消");
    }
  },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    1.2.2 自定义弹窗

    • 弹窗结构：
      • 标题
      • 内容
      • 按钮
    • 弹窗设置 v-show:"isShow"
    • 点击按钮出现弹窗，再点击弹窗消失：设置点击事件使 this.isShow = !this.isShow
    • 点击其他区域弹窗消失：
      • 该区域与其他区域为兄弟：其他区域设置点击事件使 this.isShow = false
      • 该区域与其他区域为父子：父区域设点击事件，该区域设唯一标识 id，有时可用输入框 @blur 事件
    <input id="show"/> //给该元素设唯一标识 id

showSelector:function(e){
	if(e.target.id != "show") {
		this.isShowSelector = false;
	}
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    1.3 input

    • type="number" 只能输入数字
    • type="password" 密码
    export default {
  data() {
    return {
      name: "",
    };
  },
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    1.4 swiper 滑动视图

    • swiper 位置要固定，高度宽度均要设置
    • swiper-item 高度若太长无法显示，需在其中加滚动视图 scroll-view，位置在滑动视图中绝对，或者设最大高度
    <swiper class="swiper" @change="xxx">
  <swiper-item class="swiper-item">swiper-item>
  <swiper-item class="swiper-item">swiper-item>
  <swiper-item class="swiper-item">swiper-item>
swiper>

    • 1
    • 2
    • 3
    • 4
    • 5

    1.5 scroll-view 滚动视图

    • 记得要加上 scroll-x scroll-y 否则不起作用
    <scroll-view class="scroll-view" scroll-x>scroll-view>
<scroll-view class="scroll-view" scroll-y>scroll-view>

    • 1
    • 2

    解决报错,Ignored attempt to cancel a touchmove event with cancelable=false
    三种方法解决[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false

    1.6 picker 选择

    • value 为数值，初始选择
    • range 为选择列表
    <picker @change="doPickerChange" :value="index" :range="selectList" range-key="name">
  <view>{{ selectList[index].name }}view>
picker>

    • 1
    • 2
    • 3
    doPickerChange: function(e) {
	this.index = e.detail.value
},

    • 1
    • 2
    • 3
    • 设初值为"请选择"，不过没有置灰
    <picker @change="doPickerChange" :value="index" :range="selectList" range-key="name">
  <view>{{ getSelect() }}view>
picker>

    • 1
    • 2
    • 3
    getSelect() {
	if (this.index === null) {
		return "请选择";
	}
	return this.selectList[this.index].name
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2 API

    2.1 路由与页面跳转

    路由与页面跳转

    • 跳转标签，但是这种写法，其包裹的所有内容在点击的时候都会有阴影，像外边距的部分也有阴影
    • uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack 可以返回到原页面。
    • uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。
    • uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面：点击退出登录、非登录跳转到登录界面
    • uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
    <navigator url="/pages/xxx/xxx">
  <button>button>
navigator>

    • 1
    • 2
    • 3
    // 点击跳转 @click="goNext"
goNext() {
	uni.navigateTo({
		url: "/pages/xxx/xxx"
	})
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2.2 数据缓存

    • uni.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
    • uni.setStorageSync(KEY,DATA) 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
    • uni.getStorage(OBJECT) 从本地缓存中异步获取指定 key 对应的内容。
    • uni.getStorageSync(KEY) 从本地缓存中同步获取指定 key 对应的内容。
    • uni.getStorageInfo(OBJECT) 异步获取当前 storage 的相关信息。
    • uni.getStorageInfoSync() 同步获取当前 storage 的相关信息。
    • uni.removeStorage(OBJECT) 从本地缓存中异步移除指定 key。
    • uni.removeStorageSync(KEY) 从本地缓存中同步移除指定 key。
    • uni.clearStorage() 清理本地数据缓存。
    • uni.clearStorageSync() 同步清理本地数据缓存。

    异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。
    key: setStorageSync 中设了这个 key, getStorageSync 就可取这个 key 的值

    2.3 图片

    uniapp 图片

    • 图片按原长宽比例展示：

    2.3.1 点击添加图片

    从本地相册选择图片或使用相机拍照。

    // @click="clickAddImg", methods中
clickAddImg() {
	uni.chooseImage({
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		success: function (res) {
			console.log(JSON.stringify(res.tempFilePaths));
		}
	})
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2.3.2 点击预览图片

    // @click="clickImg", methods中
clickImg() {
	uni.previewImage({
		urls: ["xxx.png"], //需要预览的图片http链接列表
		current: '', // 当前显示图片的http链接，默认是第一个
		success: function(res) {},
		fail: function(res) {},
		complete: function(res) {},
	})
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    2.4 网络状态

    uniapp 官网 网络状态

    • uni.getNetworkType(OBJECT) 获取网络类型
    uni.getNetworkType({
  success: function (res) {
    if (res.networkType == "none") {
      uni.showToast("无网络");
    }
  },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2.5 页面和窗体

    uniapp 官网 页面和窗体
    uni-app 退出登录时获取当前所在的页面

    防止重复跳转该页面

    let routes = getCurrentPages();
let curRoute = routes[routes.length - 1].route;
if (curRoute != "pages/xxx/xxx") {
  uni.navigateTo({
    url: "/pages/xxx/xxx",
  });
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • 相关阅读:
    linux 合并两个文件夹中的方法
    盘点ERP开发的那点事-业务流和数据流
    【开源教程12】疯壳·开源编队无人机-串口（视觉数据获取）
    计算连续性状的PRS得分
    SPA项目开发之表单验证&增删改功能
    Ovirt 开源虚拟化平台安装
    做了5年自媒体，总结下自媒体短视频不会内容创造怎么办？
    Spring之aop
    .NET 20周年祝贺视频-叶伟民
    Tensorflow中的会话、张量、变量
  • 原文地址：https://blog.csdn.net/m0_49271518/article/details/126071578