1.底部导航栏写法一：组件tabbar
在app.json文件中加入以下代码，
"color":字体颜色
"selectedColor":选中时的字体颜色
"borderStyle": 导航栏边框颜色（black/white两种）
"list"：菜单容器，最少俩，最多五个
"selectedIconPath": 选中的该菜单图标
"iconPath": 该菜单图标
"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": "房态"
},
{
"selectedIconPath": "images/tabbar/send_press.png",
"iconPath": "images/tabbar/send.png",
"pagePath": "pages/logs/logs",
"text": "发现"
}
,
{
"selectedIconPath": "images/tabbar/person_press.png",
"iconPath": "images/tabbar/person.png",
"pagePath": "pages/logs/logs",
"text": "我的"
}
]
}
效果的话，开发工具上看着还行，真机测试时候。。巨丑无比，来感受一下，然后我以为是我图标图片太大了，就改成了20px*20px的，然而图样图僧破，一如既往的大。我估计是内部将图标大小限定死了已经。
image.png
1.底部导航栏写法一：组件tabbar
1动态css
<view class='tabbar-item {{tabbar==1?"active":""}}' >
</view>
<view class='date-order' style='height:{{40*td.day-2}}px' >
</view>
2警示框
icon值设为none时，不显示图标
wx.showToast({
title: msg_,
icon: 'none',
duration: 2000//持续的时间
})
3表单提交-单个
<input placeholder="验证码" bindinput='inputputs_code' value="{{code_}}" auto-focus />
-----------------------------------------------------
inputputs_code: function (e) {
this.setData({
code_: e.detail.value
})
},
4表单提交-多个
<form bindsubmit="loginBtn" bindreset="formReset">
<input placeholder="手机号" name="phone" value="{{phone_}}" auto-focus />
<input placeholder="验证码" name="code" value="{{code_}}" auto-focus />
<button formType="submit">登录</button>
</form>
-------------------------------------------------------
loginBtn: function (e) {
console.log(e.detail.value);
},
5.picker
picker的简单用法
这里要说的是我遇到的一个问题。
我的数据是对象形式：
image.png
代码部分：
<picker bindchange="bindPickerChange" class='pro-select' value="{{index}}" range="{{pro}}" range-key="{{'name'}}">
<view class="picker">{{pro[index].name}}</view>
</picker>
"{{index}}"中的index就是指单纯数组下标，0，1，2，3...这种，range-key里面放的东西相当于option中的东西，我要显示名字所以就是‘name’,记得一定要放在 ‘’ 里， <view class="picker">{{pro[index].name}}</view>标签显示的是选好的展示内容。js:
bindPickerChange(e) {
console.log(e.detail.value);
}
现在我们可以得到下标，也可以得到id：pro[index].id
6.滑动组件
<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大小一定要小于滑动容器，否则触发不了bindscroll。
7.返回上一页并刷新
返回并刷新
var pages = getCurrentPages();//获取页面栈
if (pages.length > 1) {
//上一个页面实例对象
var prePage = pages[pages.length - 2];
//调用上一个页面的onShow方法
prePage.onLoad();
}
普通返回不刷新
wx.navigateBack();
返回前俩页：
wx.navigateBack( delta: 2);
微信小程序 同步请求授权
微信小程序阻止冒泡
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
所以用catchtap代替bindtap
