欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序带热门搜索的游戏攻略搜索页制作设计模板教程下载

    2018-05-24 12:23 来源/作者:懒人模板 分类:小程序教程  « »
    今天给大家带来热门搜索的游戏攻略搜索页制作设计模板教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--pages/onmyouji/hellspawnSearch/hellspawnSearch.wxml-->
    <view class="page">
      <view class="hot">
        <text class="hot_title">热门搜索</text>
        <view class="hot_list">
          <navigator url="../onmyoji/onmyoji?id={{item.id}}" wx:for="{{ popularList }}" wx:key="name" class="hot_item">{{ item.name }}</navigator>
        </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}}">
          <block wx:for="{{hellspawnList}}" wx:key="id">
            <navigator url="../onmyoji/onmyoji?id={{ item.id }}" class="weui-cell" hover-class="weui-cell_active">
              <view class="weui-cell__hd">
                <image src="{{item.icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
              </view>
              <view class="weui-cell__bd">{{ item.name }}</view>
            </navigator>
          </block>
        </view>
      </view>
      <view class="weui-footer weui-footer_fixed-bottom">
        <view class="weui-footer__text">Copyright © 2017 serenitynight.com</view>
      </view>
    </view>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议