微信小程序基础笔记
全局导航栏
navigationBarTitleText:导航标题
navigationBarBackgroundColor:导航颜色,#2b4b6b
navigationBarTextStyle:导航栏标题颜色仅支持white/black
backgroundColor:下拉窗口背景色
enablePullDownRefresh:true 开启下拉刷新
backgroundTextStyle 下拉loading样式,仅支持dark/light
onReachBottomDistance:50 触底事件距离底部距离px
tabbar:
backgroundColor:导航条背景色
selectedIconPath:选中时图片路径
borderStyle:边框颜色
IconPath:未选中时图片路径,大小限制40kb,建议81*81px
selectedColor:选中时文字颜色
color:未选中时文字颜色
list:数组类型,2-5
position:位置,仅支持bottom/top
pagePath: 页面路径
text: tab上按钮文字
新建assets -> images 目录;放置图标图片
tabBar中花括号嵌套list,再嵌套各个属性
页面配置中 disableScroll:true 设置该页面不能上下滚动
应用生命周期:
onLaunch:监听初始化,全局触发一次
onshow:监听显示,启动或从后台进入前台显示
onHide:监听隐藏,从前台进入后台
页面生命周期:
Page({
onLoad:function(options){ } //监听页面加载
onShow:function(){ } //监听页面显示
onReady:function(){ } //监听初次渲染完成
onHide:funciton () { } //监听页面隐藏
onUnload: function () { } // 监听页面卸载
})
定义页面数据
Page({
data: {
info: 'init data ' , //字符串
array: [{ msg:1} , {msg:2} ] //数组类型
flag:true
id: 1
}
})
数据渲染时:
<view>{{ info }} <view>
<view id="item- {{ id }} " ><view>
<view>{{flag? "ture" : "false"}} <view>
触摸事件:
<view bindtap="tagName"><view>
Page({
tagName: function(event) {
console.log()
}
})
文本框输入事件:
<input bindinput="inputName" data-XXX="value"><input>
Page({
inputName: function(event) {
console.log(event.detail.value) //打印输入时内容
console.log(event.target.dataset.XXX) //打印参数value
this.setData({
info:event.detail.value //双向同步信息
})
}
})
(
placeholder-style="color: skyblue"
)