1.底部導(dǎo)航欄寫法一：組件tabbar
在app.json文件中加入以下代碼坑雅，
"color":字體顏色
"selectedColor":選中時(shí)的字體顏色
"borderStyle": 導(dǎo)航欄邊框顏色（black/white兩種）
"list"：菜單容器霎迫，最少倆舅逸，最多五個(gè)
"selectedIconPath": 選中的該菜單圖標(biāo)
"iconPath": 該菜單圖標(biāo)
"pagePath": 該菜單文件路徑
"text": 該菜單名稱
"tabBar": {
"color": "#666",
"selectedColor": "#468c88",
"borderStyle": "black",
"list": [
{
"selectedIconPath": "images/tabbar/home_press.png",
"iconPath": "images/tabbar/home.png",
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"selectedIconPath": "images/tabbar/roomstate_press.png",
"iconPath": "images/tabbar/roomstate.png",
"pagePath": "pages/logs/logs",
"text": "房態(tài)"
},
{
"selectedIconPath": "images/tabbar/send_press.png",
"iconPath": "images/tabbar/send.png",
"pagePath": "pages/logs/logs",
"text": "發(fā)現(xiàn)"
}
,
{
"selectedIconPath": "images/tabbar/person_press.png",
"iconPath": "images/tabbar/person.png",
"pagePath": "pages/logs/logs",
"text": "我的"
}
]
}
效果的話，開發(fā)工具上看著還行凡壤，真機(jī)測試時(shí)候。。巨丑無比疗涉，來感受一下，然后我以為是我圖標(biāo)圖片太大了吟秩，就改成了20px*20px的咱扣，然而圖樣圖僧破，一如既往的大涵防。我估計(jì)是內(nèi)部將圖標(biāo)大小限定死了已經(jīng)闹伪。
1.底部導(dǎo)航欄寫法一：組件tabbar
1動(dòng)態(tài)css
<view class='tabbar-item {{tabbar==1?"active":""}}' >
</view>
<view class='date-order' style='height:{{40*td.day-2}}px' >
</view>
2警示框
icon值設(shè)為none時(shí)，不顯示圖標(biāo)
wx.showToast({
title: msg_,
icon: 'none',
duration: 2000//持續(xù)的時(shí)間
})
3表單提交-單個(gè)
<input placeholder="驗(yàn)證碼" bindinput='inputputs_code' value="{{code_}}" auto-focus />
-----------------------------------------------------
inputputs_code: function (e) {
this.setData({
code_: e.detail.value
})
},
4表單提交-多個(gè)
<form bindsubmit="loginBtn" bindreset="formReset">
<input placeholder="手機(jī)號" name="phone" value="{{phone_}}" auto-focus />
<input placeholder="驗(yàn)證碼" name="code" value="{{code_}}" auto-focus />
<button formType="submit">登錄</button>
</form>
-------------------------------------------------------
loginBtn: function (e) {
console.log(e.detail.value);
},
5.picker
picker的簡單用法
這里要說的是我遇到的一個(gè)問題。
我的數(shù)據(jù)是對象形式：
代碼部分：
<picker bindchange="bindPickerChange" class='pro-select' value="{{index}}" range="{{pro}}" range-key="{{'name'}}">
<view class="picker">{{pro[index].name}}</view>
</picker>
"{{index}}"中的index就是指單純數(shù)組下標(biāo)偏瓤，0杀怠，1，2厅克，3...這種赔退，range-key里面放的東西相當(dāng)于option中的東西，我要顯示名字所以就是‘name’,記得一定要放在 ‘’ 里已骇， <view class="picker">{{pro[index].name}}</view>標(biāo)簽顯示的是選好的展示內(nèi)容离钝。js:
bindPickerChange(e) {
console.log(e.detail.value);
}
現(xiàn)在我們可以得到下標(biāo)，也可以得到id：pro[index].id
6.滑動(dòng)組件
<scroll-view scroll-y scroll-x bindscroll="scrollTopFun" style='width:300px;height:300px;overflow:auto'>
<view style='width:800px;height:800px;background:pink'>
<view>hhhhh</view>
</view>
</scroll-view>
js:
scrollTopFun: function (e) {
console.log(e);
}
這里要注意：scroll-view大小一定要小于滑動(dòng)容器褪储，否則觸發(fā)不了bindscroll卵渴。
7.返回上一頁并刷新
返回并刷新
var pages = getCurrentPages();//獲取頁面棧
if (pages.length > 1) {
//上一個(gè)頁面實(shí)例對象
var prePage = pages[pages.length - 2];
//調(diào)用上一個(gè)頁面的onShow方法
prePage.onLoad();
}
普通返回不刷新
wx.navigateBack();
返回前倆頁：
wx.navigateBack( delta: 2);
微信小程序 同步請求授權(quán)
微信小程序阻止冒泡
bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡鲤竹。
所以用catchtap代替bindtap
