微信Weui教程

微信小程序weui在线入门教程-WeUi搜索相关-searchbar搜索栏

时间:2019/1/13 12:04:35  作者:互联网  来源:网络转载  查看:15615  评论:0
内容摘要:效果图js代码  data: {    inputShowed: false,    inputVal: ""  },  showInput: function () {...
效果图
微信小程序weui在线入门教程-WeUi搜索相关-searchbar搜索栏
微信小程序weui在线入门教程-WeUi搜索相关-searchbar搜索栏

js代码

  data: {

    inputShowed: false,

    inputVal: ""

  },

  showInput: function () {

    this.setData({

      inputShowed: true

    });

  },

  hideInput: function () {

    this.setData({

      inputVal: "",

      inputShowed: false

    });

  },

  clearInput: function () {

    this.setData({

      inputVal: ""

    });

  },

  inputTyping: function (e) {

    this.setData({

      inputVal: e.detail.value

    });

  },




wxml代码

<view class="page">

  <view class="page__hd">

    <view class="page__title">SearchBar</view>

    <view class="page__desc">搜索栏</view>

  </view>

  <view class="page__bd">

    <view class="weui-search-bar">

      <view class="weui-search-bar__form">

        <view class="weui-search-bar__box">

          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>

          <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />

          <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">

            <icon type="clear" size="14"></icon>

          </view>

        </view>

        <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">

          <icon class="weui-icon-search" type="search" size="14"></icon>

          <view class="weui-search-bar__text">搜索</view>

        </label>

      </view>

      <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>

    </view>

    <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

        <view class="weui-cell__bd">

          <view>实时搜索文本</view>

        </view>

      </navigator>

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

        <view class="weui-cell__bd">

          <view>实时搜索文本</view>

        </view>

      </navigator>

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

        <view class="weui-cell__bd">

          <view>实时搜索文本</view>

        </view>

      </navigator>

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

        <view class="weui-cell__bd">

          <view>实时搜索文本</view>

        </view>

      </navigator>

    </view>

  </view>

</view>



欢迎大家学习我的视频课程:微信小程序-WeUI界面布局设计入门到精通
  Weui项目的引用



相关评论
评论者:      验证码:  点击获取验证码
本类推荐
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |