CSS小知识:文字只显示一行,如果有溢出,显示为省略号
white-space: nowrap; // 文字在空格处不允许换行
overflow: hidden: // 溢出的文本隐藏掉
text-overflow: ellipsis; // 如果发生文本溢出,显示为省略号
CSS小知识:文字只显示三行,如果有溢出,显示为省略号
overflow: hidden; //溢出内容:隐藏
text-overflow: ellipsis; //文本溢出的话:用省略号代替
display: -webkit-box; //-webkit-前缀:Safari / Chrome / Opera / Edge
-webkit-line-clamp: 2; //行数固定:2
-webkit-box-orient: vertical; //固定的行如何排列:竖直
①“加载中”提示对话框: uni.showLoading() / uni.hideLoading()
② “吐司”提示对话框: uni.showToast() —— 显示几秒钟后自动消失,用于“不太紧要的”提示
③ “模态”对话框:uni.showModal() —— 对话框上有“确定/取消”一类的按钮,必须等待用户选择
④ “动作清单”对话框:uni.showActionSheet()—— 从页面底部升起,有若干选项,供用户选择的菜单
mode:
model: MVVM(Model - View - ViewModel),模型,指的是数据
modal: 模态对话框,不关闭的话父窗口就无法操作
debounce:防抖;DOM事件有时触发频率极高,例如:onmousemove、ontouchmove、onscroll、onresize、oninput,可以在很短时间内触发几十甚至上百次。如果这类事件处理方法中需要向服务器发起异步发起请求,很可能在很多时间内产生多次请求,响应消息还没回来,就可以开始更多的请求了。
性能优化方案:触发一次事件后,不要马上发起异步请求,等待一段时间之后再发;如果等待时间内又触发了一次该事件,重新计时。
doInput(){
if(this.timer){
clearTimeout(this.timer)
}
this.timer = setTimeout( fn, 1000 )
}
//PAGE1
uni.navigateTo({
url: '/pages/page2/page2?kw=Apple&age=20'
})
//PAGE2
onLoad( data ){ //{kw:'Apple',age:20}
console.log(data.kw, data.age)
}
---------------------------------------------
onLoad( {kw, age} ){ //let {kw,age}=data
console.log(kw, age)
}
① uni.stopPullDownRefresh():隐藏顶部下拉刷新动画图标
② uni.setNavigationBarTitle():设置导航条标题
③ uni.getWindowInfo():获取当前屏幕和窗口的尺寸数据
Vue.js做法:
{{content}}
小程序做法:
{{content}}
uni-app中的innerHTML绑定推荐使用“小程序中的rich-text组件”
父组件的数据,传递给子组件 —— Props Down
//Parent.vue
data: age:20
<Child :childAge="age"/>
//Child.vue
props: childAge
<text>{{childAge}}</text> //20
子组件的数据,传递给父组件 —— Events Up
//Parent.vue
<Child @cry="f1"/>
function f1( data ){
clog( data.price )
}
//Child.vue
price: 10
this.$emit( 'cry', {price: this.price} )