微信小程序之首页

1.底部导航栏写法一：组件tabbar

tabbar组件api

在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