微信小程序---365笔记第42天---搜索框功能封装,调用键盘搜索

需求:
1.搜索框功能的实现,点击聚焦,右边显示取消按钮;
2.调起手机键盘的搜索键;

图片.png

图片.png

图片.png

wxml:

      <!--搜索框开始-->
      <view class="index-search-bar">
        <view class="index-search-bar__form">
          <!--点击之后,出现input框  -->
          <view class="index-search-bar__box">
            <icon class="index-icon-search_in-box" type="search" size="14"></icon>
            <input confirm-type='search' class="index-search-bar__input" placeholder="请输入关键字" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
            <!--输入款字数大于0,则显示清除按钮  -->
            <view class="index-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
              <icon type="clear" size="14"></icon>
            </view>
          </view>
          <!--没点击之前,只是一些文字和图标  -->
          <label class="index-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
            <icon class="index-icon-search" type="search" size="14"></icon>
            <view class="index-search-bar__text">搜索</view>
          </label>
        </view>
        <!--动态出现的“取消”键  -->
        <view class="index-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
      </view>
      <!--搜索框结束-->

wxss:

    /* 搜索框开始 */
    .index-search-bar {
      position: relative;
      padding:15rpx 10rpx 15rpx 10rpx;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      box-sizing: border-box;
      background-color: #fff;
      /* border-top: 1rpx solid #d7d6dc;
      border-bottom: 1rpx solid #d7d6dc; */
    }

    .index-icon-search {
      margin-right: 8px;
      font-size: inherit;
    }

    .index-icon-search_in-box {
      position: absolute;
      left: 10px;
      top: 8px;
    }

    .index-search-bar__text {
      display: inline-block;
      font-size: 14px;
      vertical-align: middle;
      height:66rpx;
    }

    .index-search-bar__form {
      position: relative;
      -webkit-box-flex: 1;
      -webkit-flex: auto;
      flex: auto;
      border-radius:50rpx;
      background: #f3f3f3;
      border: 1rpx solid #f3f3f3;
    }

    .index-search-bar__box {
      position: relative;
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
      box-sizing: border-box;
      z-index: 1;
    }

    .index-search-bar__input {
      height: 28px;
      line-height: 28px;
      font-size: 14px;
    }

    .index-icon-clear {
      position: absolute;
      top: 0;
      right: 0;
      padding: 7px 8px;
      font-size: 0;
    }

    .index-search-bar__label {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
      border-radius:50rpx;
      text-align: center;
      color: #9b9b9b;
      background: #f3f3f3;
      line-height: 28px;
    }

    .index-search-bar__cancel-btn {
      margin-left: 10px;
      line-height: 28px;
      color: #999;
      white-space: nowrap;
      font-size: 30rpx;
    }

    /* 搜索框结束 */

js:

      showInput: function () {
        this.setData({
          inputShowed: true
        });
      },

      hideInput: function () {
        this.setData({
          inputVal: "",
          inputShowed: false
        });
      },
      clearInput: function () {
        this.setData({
          inputVal: ""
        });
      },
      inputTyping: function (e) {
        console.log(e.detail.value)
        //搜索数据 // 
        getList(this, e.detail.value);
        this.setData({
          inputVal: e.detail.value
        });
      },

tips;
1.调起手机自带的搜索按钮,需要在input里面添加 comfirm-type="search"; 在搜索聚焦的时候,调起键盘,键盘右下角会出现搜索按钮,有的实际是完成按钮;

热爱前端,热爱编程,热爱分享,欢迎一起聊各种技术问题,一起进步,一起成长!微信:zhan_1337608148

展开阅读全文

Python数据分析与挖掘

01-08
92讲视频课+16大项目实战+源码+¥800元课程礼包+讲师社群1V1答疑+社群闭门分享会=99元   为什么学习数据分析?       人工智能、大数据时代有什么技能是可以运用在各种行业的?数据分析就是。       从海量数据中获得别人看不见的信息,创业者可以通过数据分析来优化产品,营销人员可以通过数据分析改进营销策略,产品经理可以通过数据分析洞察用户习惯,金融从业者可以通过数据分析规避投资风险,程序员可以通过数据分析进一步挖掘出数据价值,它和编程一样,本质上也是一个工具,通过数据来对现实事物进行分析和识别的能力。不管你从事什么行业,掌握了数据分析能力,往往在其岗位上更有竞争力。    本课程共包含五大模块: 一、先导篇: 通过分析数据分析师的一天,让学员了解全面了解成为一个数据分析师的所有必修功法,对数据分析师不在迷惑。   二、基础篇: 围绕Python基础语法介绍、数据预处理、数据可视化以及数据分析与挖掘......这些核心技能模块展开,帮助你快速而全面的掌握和了解成为一个数据分析师的所有必修功法。   三、数据采集篇: 通过网络爬虫实战解决数据分析的必经之路:数据从何来的问题,讲解常见的爬虫套路并利用三大实战帮助学员扎实数据采集能力,避免没有数据可分析的尴尬。   四、分析工具篇: 讲解数据分析避不开的科学计算库Numpy、数据分析工具Pandas及常见可视化工具Matplotlib。   五、算法篇: 算法是数据分析的精华,课程精选10大算法,包括分类、聚类、预测3大类型,每个算法都从原理和案例两个角度学习,让你不仅能用起来,了解原理,还能知道为什么这么做。
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值