微信小程序里用到的一些小知识点（二）

又开始写小程序，发现自己还是很菜哎(T ^ T)
1、view垂直居中，类似下面的效果：

image.png

width:580rpx;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);//写在里面需要居中的view上

div居中也是这样写。
2、class名字中使用三目运算：

     <view class='nav_box2 {{index==inde?"active2":""}}' data-index="{{index}}" bindtap='choose' wx:for="{{chooseTitle2}}" wx:key>
        {{item}}
      </view>

就是要记得问号后面的class名也要加引号。
3、用setData修改数组中某一项的值：

    var chooseTitle = that.data.chooseTitle;//需要改变的数组
    var name = "chooseTitle[" + 0+ "].name";//先用一个变量，把(chooseTitle[0].name)用字符串拼接起来
    that.setData({
      choose:false,
      [name]: "改变之后的值"//即筛选条件变成所选的name   ！！！一定要加方括号！！！
    })

4、小程序搜索框的实现：
首先，小程序input有个属性叫confirm-type （只有type="text"的时候有效），可以设置键盘的右下角按钮：

所以，搜索时设置confirm-type="search"。点击键盘上搜索按钮时，可以获取到input里面输入的值：

image.png
代码：

<input placeholder='输入商户名、地点' name="search" type='text' confirm-type="search" bindconfirm="EventHandle" value='{{searchValue}}'></input>
<text class='del' bindtap='del'>取消</text>

// 点击键盘上的搜索
  EventHandle:function(e){
    console.log(e.detail.value)//可以打印出input输入的值

  },

点击取消时清空input的内容：

// 点击取消
  del:function(){
    this.setData({
      searchValue:''
    })
  },

效果如下：

image.png

ps:input实时获取输入的内容，只需要给input加上属性 bindinput="bindKeyInput"：

image.png

bindKeyInput: function(e) {
    this.setData({
      inputValue: e.detail.value//input里输入的内容
    })
  },

5、微信小程序滚轮滑动触发事件，在滑动页面时，通过onPageScroll函数监听，直接写在js文件里就可以：

onPageScroll:function(e){
    console.log(e);//{scrollTop:实际距离}
  }

6、改变微信小程序轮播图小点的位置：

.swiper-box .wx-swiper-dot{ position: relative;top:-88rpx;} 

貌似还可以改变小点的颜色和样式。
7、textarea组件穿透问题
页面里有textarea组件时，它的z-index总是默认最高，再有弹出层也盖不上它。
能想到的解决办法就只有在其它层弹出的时候textarea设为display:none;即把它隐藏掉。

8、data-index='{{index}}'

<view class='toStore' bindtap='toLike1' data-index="{{index}}">
          <block wx:if="{{shouquan!=1}}"><image src='/pages/image/like.png' class='like'></image>我喜欢</block>
          <block wx:if="{{shouquan==1}}"><image src='/pages/image/liked.png' class='like'></image>取消喜欢</block>
 </view>

在js里：

toLike1: function (e) {
    var that = this;
    var index = e.currentTarget.dataset.index;
    console.log(index)//打印出点击的项对应的索引值
  },

emmmm..........一般和第3条（用setData修改数组中某一项的值）结合起来用。
9、发现一个很好用的东西，wx.showLoading()居然能用wx.hideLoading()关闭，这样子写“正在加载”这种就很方便啦~开心。

wx.showLoading({
  title: '加载中，请稍候~',
})
 
wx.request({
  url:xxx,
  success:function (res)  {
    wx.hideLoading()
  },
})

开心。
10、textarea的最大字数限制是140，但是设置maxlength='-1'就可以没有限制啦，想输多少字就输多少字。
11、view里的英文和数字不换行，加上word-break:break-all;。