UNIAPP day_04(9.2) 移动端对话框、节流防抖、跳转传参、补充API

CSS小知识：文字只显示一行，如果有溢出，显示为省略号

white-space:  nowrap;         // 文字在空格处不允许换行
overflow: hidden:             // 溢出的文本隐藏掉
text-overflow: ellipsis;      //  如果发生文本溢出，显示为省略号
1
2
3

CSS小知识：文字只显示三行，如果有溢出，显示为省略号

overflow: hidden;                //溢出内容：隐藏
text-overflow: ellipsis;            //文本溢出的话：用省略号代替
display: -webkit-box;             //-webkit-前缀：Safari / Chrome / Opera / Edge
-webkit-line-clamp: 2;            //行数固定：2
-webkit-box-orient: vertical;      //固定的行如何排列：竖直
1
2
3
4
5

一、移动端应用中常用的对话框

①“加载中”提示对话框： uni.showLoading() / uni.hideLoading()
② “吐司”提示对话框： uni.showToast() —— 显示几秒钟后自动消失，用于“不太紧要的”提示
③ “模态”对话框：uni.showModal() —— 对话框上有“确定/取消”一类的按钮，必须等待用户选择
④ “动作清单”对话框：uni.showActionSheet()—— 从页面底部升起，有若干选项，供用户选择的菜单

mode：
model： MVVM（Model - View - ViewModel），模型，指的是数据
modal： 模态对话框，不关闭的话父窗口就无法操作

二、WEB性能优化：节流和防抖

debounce：防抖；DOM事件有时触发频率极高，例如：onmousemove、ontouchmove、onscroll、onresize、oninput，可以在很短时间内触发几十甚至上百次。如果这类事件处理方法中需要向服务器发起异步发起请求，很可能在很多时间内产生多次请求，响应消息还没回来，就可以开始更多的请求了。
性能优化方案：触发一次事件后，不要马上发起异步请求，等待一段时间之后再发；如果等待时间内又触发了一次该事件，重新计时。

doInput(){
     if(this.timer){
          clearTimeout(this.timer)
     }
     this.timer = setTimeout(  fn,   1000 )
}
1
2
3
4
5
6

三、微信小程序/uni-app中如何进行页面跳转传参

//PAGE1
uni.navigateTo({
   url:  '/pages/page2/page2?kw=Apple&age=20'
})
1
2
3
4

//PAGE2
onLoad( data ){   //{kw:'Apple',age:20}
   console.log(data.kw,  data.age)
}
---------------------------------------------
onLoad( {kw,  age} ){  //let {kw,age}=data
   console.log(kw,  age)
}
1
2
3
4
5
6
7
8

四、补充：uni-app官方提供的API

① uni.stopPullDownRefresh()：隐藏顶部下拉刷新动画图标
② uni.setNavigationBarTitle()：设置导航条标题
③ uni.getWindowInfo()：获取当前屏幕和窗口的尺寸数据

五、如何在页面中显示HTML标签片段

Vue.js做法：

• 方法1：{{content}}
  {{}}做内容绑定底层：.innerText = content
• 方法2：
  v-text属性绑定：.innerText = content
• 方法3：
  v-html属性绑定：.innerHTML = content

小程序做法：

• 方法1：{{content}}
  {{}}做内容绑定底层：.innerText = content
• 方法2：
  rich-text的nodes属性绑定：.innerHTML = content

uni-app中的innerHTML绑定推荐使用“小程序中的rich-text组件”

六、Vue.js/uni-app中的父子组件间传参

父组件的数据，传递给子组件 —— Props Down

//Parent.vue
data:  age:20
<Child  :childAge="age"/>
1
2
3

//Child.vue
props: childAge
<text>{{childAge}}</text>    //20
1
2
3

子组件的数据，传递给父组件 —— Events Up

//Parent.vue
<Child  @cry="f1"/>
function f1( data ){
   clog( data.price )
}
1
2
3
4
5

//Child.vue
price: 10
this.$emit( 'cry', {price: this.price} )
1
2
3