微信小程序橙色外卖店铺搜索页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!-- 可用组件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/ -->
<import src="../template/template"></import>
<view class="serach-wrap">
  <!--顶部搜索-->
  <view class="search">
    <!--当前位置-->
    <input bindinput="searchInput" confirm-type="search" bindconfirm="searchShop" focus="true" class="search-in iconfont icon-sousuo_sousuo" placeholder="请输入餐厅、 菜系、 商圈" />
    <view data-type="btn" bindtap="searchShop" class="search-btn">搜索</view>
  </view>
  <!--搜索历史-->
  <view class="search-history">
    <view class="search-operation" wx:if="{{ searchShow }}">
      <view>搜索记录</view>
      <view bindtap="cleanHistory">清空记录</view>
    </view>
    <view class="menu2-comment">
      <view bindtap="chooseTip" data-choose="{{ index }}" class="menu2-comment-item {{ chooseHistory == index ?  'active' : '' }}" wx:for="{{ history }}" wx:key="unique">
        {{ item }}
      </view>
    </view>
  </view>
  <!--商店结果展示-->
  <view class="near-shop">
    <view class="slide ">搜索结果</view>
    <!--<view class="near-shop-wrap">-->
      <!--<navigator url="../ordering/ordering?shopId={{ item.id }}" hover-class="none" class="near-shop-content" wx:for="{{ nearShop }}" wx:key="unique">-->
        <!--<image class="near-shop-img" src="{{ item.img }}"></image>-->
        <!--<view class="near-shop-detail">-->
          <!--<veiw class="n-s-c-name">{{ item.name }}</veiw>-->
          <!--<view class="n-s-c-price {{ item.grade }} iconfont icon-wuxing"> ￥{{ item.price }}/人</view>-->
          <!--<view class="n-s-c-kind">{{ item.kind }}  {{ item.distance }}</view>-->
          <!--<view class="n-s-c-status">-->
            <!--<text class="n-s-c-s-left">排队</text>-->
            <!--<text class="n-s-c-s-center">当前排队状况</text>-->
            <!--<text class="n-s-c-s-right">{{ item.status }}</text>-->
          <!--</view>-->
        <!--</view>-->
      <!--</navigator>-->
    <!--</view>-->
    <template is="shopList" data="{{ nearShop }}"></template>
  </view>
</view>

二、wxss样式文件代码如下：

.search {
  display: flex;
  align-items: center;
  padding: 20rpx;
  height: 90rpx;
  width: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 999999;
  top: 0;
  box-sizing: border-box;
}
.search .search-in {
  flex: 1;
  height: 53rpx;
  border: 1rpx solid #eee;
  border-radius: 15rpx;
  font-size: 24rpx;
  padding-left: 48rpx;
  box-sizing: border-box;
  position: relative;
  font-weight: 600;
}
.search .search-in::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(50%, -50%);
}
.search .search-btn {
  width: 100rpx;
  border-radius: 50rpx;
  background-color: #f00;
  margin-left: 10rpx;
  text-align: center;
  color: #fff;
  font-size: 24rpx;
  line-height: 53rpx;
}
.search-history {
  margin-top: 90rpx;
}
.search-operation {
  display: flex;
  padding: 10rpx 20rpx;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;
}
.search-operation view {
  border: 1rpx solid #eee;
  background-color: #eee;
  border-radius: 10rpx;
  font-size: 25rpx;
}
.menu2-comment {
  display: flex;
  flex-wrap: wrap;
  padding: 0rpx 10rpx;
}
.menu2-comment .menu2-comment-item {
  font-size: 24rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  color: #a67c52;
  border: 1rpx solid #a67c52;
  margin: 10rpx;
}
.menu2-comment .active {
  color: #603813;
  background-color: #fdf899;
}

三、js页面代码如下：

'use strict';

// 获取全局应用程序实例对象
// const app = getApp()

// 创建页面实例对象
Page({
  /**
   * 页面的初始数据
   */
  data: {
    title: 'search',
    nearShop: [{
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '30',
      kind: '中国菜',
      distance: '8.6km',
      status: '无需排队',
      grade: 'five-star'
    }, {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '30',
      kind: '中国菜',
      status: '无需排队',
      grade: 'four-star'
    }, {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '128',
      kind: '中国菜',
      status: '无需排队',
      grade: 'one-star'
    }, {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '128',
      kind: '中国菜',
      status: '无需排队',
      grade: 'one-star'
    }, {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '128',
      kind: '中国菜',
      status: '无需排队',
      grade: 'one-star'
    }, {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '128',
      kind: '中国菜',
      status: '无需排队',
      grade: 'one-star'
    }, {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '128',
      kind: '中国菜',
      status: '无需排队',
      grade: 'one-star'
    }, {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '青花椒砂锅鱼',
      price: '128',
      kind: '中国菜',
      status: '无需排队',
      grade: 'one-star'
    }],
    searchText: null,
    history: [],
    chooseHistory: null,
    searchShow: true
  },
  /**
   * 清空搜索记录
   */
  cleanHistory: function cleanHistory() {
    this.setData({
      history: [],
      searchShow: false
    });
    wx.removeStorageSync('history');
  },

  /**
   * 改变标签选择
   * @param e
   */
  chooseTip: function chooseTip(e) {
    var index = e.currentTarget.dataset.choose;
    this.setData({
      chooseHistory: index
    });
  },

  /**
   * 搜索返回
   */
  searchShop: function searchShop(e) {
    var searcheText = null;
    if (e.currentTarget.dataset.type === 'btn') {
      // 按钮搜索
      console.log(this.data.searchText);
      searcheText = this.data.searchText;
    } else {
      // 打字框搜索
      console.log(e.detail.value);
      searcheText = e.detail.value;
    }
    var that = this;
    // 设置缓存
    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;

    try {
      for (var _iterator = that.data.history[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
        var index = _step.value;

        if (index === searcheText) return;
      }
    } catch (err) {
      _didIteratorError = true;
      _iteratorError = err;
    } finally {
      try {
        if (!_iteratorNormalCompletion && _iterator.return) {
          _iterator.return();
        }
      } finally {
        if (_didIteratorError) {
          throw _iteratorError;
        }
      }
    }

    var history = that.data.history;
    console.log(history);
    if (!history) {
      history = [searcheText];
      that.data.history = history;
    } else {
      var count = history.unshift(searcheText);
      if (count >= 10) {
        that.data.history.pop();
      }
    }
    this.setData({
      chooseHistory: 0,
      searchShow: true
    });
    wx.setStorage({
      key: 'history',
      data: that.data.history,
      success: function success() {
        that.setData({
          history: wx.getStorageSync('history')
        });
      }
    });
  },

  /**
   * 键盘输入改变搜索结果
   */
  searchInput: function searchInput(e) {
    console.log(e.detail.value);
    this.setData({
      searchText: e.detail.value
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function onLoad() {
    // 读取搜索历史
    var history = wx.getStorageSync('history');
    if (!history) {
      this.setData({
        searchShow: false
      });
    }
    this.setData({
      history: history
    });
    // TODO: onLoad
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function onReady() {
    // TODO: onReady
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function onShow() {
    // TODO: onShow
  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function onHide() {
    // TODO: onHide
  },


  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function onUnload() {
    // TODO: onUnload
  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function onPullDownRefresh() {
    // TODO: onPullDownRefresh
  }
});
//# sourceMappingURL=search.js.map

模板简介：该模板名称为【微信小程序橙色外卖店铺搜索页面样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。