uniapp 总计涵盖(html vue css js)

林间风雨

已于 2024-03-19 11:41:55 修改

阅读量1.6k

点赞数 2

分类专栏： CSS 文章标签： javascript vue.js 前端

于 2021-03-04 09:30:53 首次发布

本文链接：https://blog.csdn.net/jack_rose_me/article/details/114358822

版权

本文详细介绍了uniapp的开发实践，包括js的模板字符串、vue的this.$set、uniapp的页面间通信和底部tabbar的使用，以及css样式和表单组件的应用。此外，还讲解了uniapp的动态设置页面标题、底部导航栏的数字标记以及组件如switch的使用。

摘要由CSDN通过智能技术生成

一、网址

内置组件 https://hellouniapp.dcloud.net.cn/pages/component/switch/switch
组件文档 https://www.bookstack.cn/read/uniapp-component/8bbc8a6b239e1fad.md
aip文档 https://uniapp.dcloud.io/api/README
扩展组件uni-ui
https://ext.dcloud.net.cn/plugin?id=55
https://ext.dcloud.net.cn/plugin?name=uni-swipe-action

二、js

19、模板字符串

const powerNum = 3
this.message = `您有${
    powerNum}次机会`
<view>控制器 {
   {
    `${
    aeratorRegulator.name}:${
    aeratorRegulator.eui}` }}</view>

18、some

var a = [11,50,40,3,5,80,90,4]
function some(item,index,array){
   
    console.log(item);
    return item>10
}
a.some(some);
//11
//true
注意：some如果遇到 true 就不在执行了。
如果都为 false 返回false。
不会改变原数组

17、vue中this.$set的用法

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this. $se t （）这个方法了，简单来说 t hi s .$ set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
在这里插入图片描述

const updateData = {
   
	...this.tabList[index],
	loadMore: 'loading',
	page: this.tabList[index].page + 1
}
this.$set(this.tabList, index, updateData)

16、findIndex 传入一个函数符合条件的数组第一个元素位置

如果没有符合条件的元素返回 -1

15、底部tabbar导航栏右上角添加数字标记

uni.setTabBarBadge({
   
  index: 0,
  text: '1'
})

14、indexOf 返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到匹配的字符串则返回 -1。
var a = [1,2,3,'4','5','6'];
console.log(a.indexOf(3));  //2
console.log(a.indexOf('4')); //3
console.log(a.indexOf(4));  //-1

13、test() 方法用于检测一个字符串是否匹配某个模式

var patt = /^(([1-9][0-9]*)|(([0]\.\d{
   1,2}|[1-9][0-9]*\.\d{
   1,2})))$/;  // 保留两位小数点
let checkRes = patt.test(this.getAmount)

12、includes() 方法用于判断字符串是否包含指定的子字符串。

如果找到匹配的字符串则返回 true，否则返回 false。
var str = "Hello world,";
var n = str.includes("world");  // true

11、数组里的字符串转数字

["9", "8"]
[9, 8]
this.checkList = this.List ? this.List .map(i=>+i) : []

10、监听页面卸载，点击左上返回键触发

onUnload() {}

9、解构赋值

const {firmId, firmName} = this.userDetails

8、隐式转换

123 + ‘’

7、onLoad 监听页面加载

onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }

6、 !null > true, !undefined > true

if (!firmId) {
return this.showToastMsg(‘商行id错误’)
}

5、JSON.parse() JSON.stringify()

4、tap和click的区别

tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。另外，click事假是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms这样，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。而且，tap还有一个特点就是『事件穿透』，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点子事件的话，也会默认触发。

3、if (resp.statusCode === 200 && data.status === 200) {

2、保留小数点后两位

{
   {
   item.menoy | toFixedTwo}}
    toFixedTwo(value) {
   
      const newVal = parseFloat(value).toFixed(2)
      return newVal
    }

1、Map

var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);
---------------------------------------------------------
const map1 = array1.map(x => {
   
    if (x == 4) {
   
        return x * 2;
    }
});
console.log(map1);
---------------------------------------------------------
const map1 = array1.map(x => {
   
    if (x == 4) {
   
        return x * 2;
    }
    return x;
});
这里注意箭头函数有两种格式：
1.只包含一个表达式，这时花括号和return都省略了。
2.包含多条语句，这时花括号和return都不能省略。

0、data 命名

imgList:{
   
				path:[]
},
IMAGE_HOST: this.$IMAGE_HOST,
isIPx: getApp().globalData.isIPx,
active: 0, // 当前优惠tab栏
actualStatus: false,
payActive: '现金', // 当前支付方式tab栏
searchTimer: null,
loadMore: 'loading',
triggered: false
payMethod: [{
   
		id: 1,
		name: '现金',
		img: this.$IMAGE_HOST + '/cash.svg'
	},
	{
   
		id: 2,
		name: '支付宝',
		img: this.$IMAGE_HOST + '/Alipay.svg'
	},
	{
   
		id: 3,
		name: '微信',
		img: this.$IMA