01 微信小程序 搜索栏 语法

微信小程序

功能实现代码：https://www.cnblogs.com/ynzj123/p/12765217.html

• 注释 快捷键： Ctrl+/

wxml：

• 搜索图标： icon type="search"

• 搜索框： input type="text"

• 在输入框focus的时候触发事件： bindfocus

• 取消图标： icon type="clear"

• 输入框提示： placeholder

wxss：

• 边距，上右下左： margin:auto 0 auto 20rpx ;

• 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效： display:flex

• 沿水平主轴让元素从左向右排列： flex-direction:row;

• 让元素沿垂直主轴从上到下垂直排： flex-direction:column;

• 生成绝对定位的元素，位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定： position: absolute;

js：

• 初始数据： data: { containershow:true,

• 点击输入触发功能： onbindfocus:function(event){
  赋值： var value = event.detail.value
  控制台输出： console.log(value);

• 改变数据显示： this.setData({
  containershow:false,
  searchxx:true