首页 > 小程序教程 > 微信小程序企业版灰色背景热门历史搜索页面设计制作开发教程

微信小程序企业版灰色背景热门历史搜索页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序企业版灰色背景热门历史搜索页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/search/search.wxml-->
<view class="search df">
    <input class="df_1" placeholder="请输入你有搜索的内容" auto-focus focus="{{focus}}" value="{{searchValue}}" bindinput="searchValueInput"/>
    <button bindtap="doSearch"><image class="searchcion" src="/images/search.png"></image></button>
</view>
<view class="cont" wx:if="{{hotKeyShow}}">
    <text class="font_14">热门搜索</text>
    <view class="w100">
        <button wx:for="{{hotKeyList}}" bindtap="doKeySearch" data-key="{{item.keyword}}">{{item.keyword}}</button>
    </view>
    <text class="font_14 mt10">历史搜索</text>
    <view class="w100">
        <button wx:for="{{historyKeyList}}" bindtap="doKeySearch" data-key="{{item.keyword}}">{{item.keyword}}</button>
    </view>
</view>
<view class="search_no" wx:if="{{!!searchValue && !productData.length}}">
    <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
    <text>没有找到您要的宝贝/(ㄒoㄒ)/~~</text>
</view>
<view class="shop" wx:for="{{productData}}"> 
    <navigator url="../product/detail?productId={{item.id}}" hover-class="changestyle">      
        <image class="sh_slt" src="{{item.photo_x}}"></image>
        <view class="sp_text">
            <view class="sp_tit ovh1">{{item.name}}</view>
            <view class="sp_jg">¥:{{item.price_yh}}</view>
        </view>
    </navigator>
</view>
 
二、wxss样式文件代码如下:
/* pages/search/search.wxss */
.search{
    padding: 1% 3%;
    background: #000;
}
.search input{
    width: 75%;
    border-radius: 13px;
    background: #fff;
    border: none;
    font-size: 12px;
    padding:1% 2.5%;
    margin-right: 5px;
    }
.search button{
    line-height:30px;
    background: none;
    text-align: center;
    border: none;
    padding: 3px;
}
.search button::after{
    content: none;
}
.searchcion{
    width: 24px;
    height: 24px;
    text-align: center
}
.cont{
     width: 94%;
     padding: 3%;     
}
.w100{ 
    width: 100%;
    padding-bottom: 10px;
}
.w100 button{
    text-align: center;
    line-height: 20px;
    margin: 3% 2% 0 0;
    display: inline-table;
    padding:5px 10px;
    font-size: 12px;
}
.shop{
    width: 49%;
    background: #fff;
    float: left;
    margin-bottom: 4%;
}
.shop:nth-child(even){
    margin-right: 2%;
}
.sh_slt{
    width: 100%;
    height: 370rpx;
    overflow: hidden;
}
.sp_text{
    float: left;
    line-height: 25px;
    width: 92%;
    padding: 4%;
    }
.sp_tit{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
}
.sp_jg{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    color: #fc0628;
    line-height: 30px;
}
三、js页面代码如下:
var app = getApp();
// pages/search/search.js
Page({
  data:{
    focus:true,
    hotKeyShow:true,
    historyKeyShow:true,
    searchValue:'',
    page:0,
    productData:[],
    historyKeyList:[],
    hotKeyList:[]
  },
  onLoad:function(options){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Search/index',
      method:'post',
      data: {uid:app.d.userId},
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var remen = res.data.remen;
        var history = res.data.history;

        that.setData({
          historyKeyList:history,
          hotKeyList:remen,
        });
      },
      fail:function(e){
        wx.showToast({
          title: '网络异常!',
          duration: 2000
        });
      },
    })
  },
  onReachBottom:function(){
      //下拉加载更多多...
      this.setData({
        page:(this.data.page+10)
      })
      
      this.searchProductData();
  },
  doKeySearch:function(e){
    var key = e.currentTarget.dataset.key;
    this.setData({
      searchValue: key,
       hotKeyShow:false,
       historyKeyShow:false,
    });

    this.data.productData.length = 0;
    this.searchProductData();
  },
  doSearch:function(){
    var searchKey = this.data.searchValue;
    if (!searchKey) {
        this.setData({
            focus: true,
            hotKeyShow:true,
            historyKeyShow:true,
        });
        return;
    };

    this.setData({
      hotKeyShow:false,
      historyKeyShow:false,
    })
    
    this.data.productData.length = 0;
    this.searchProductData();

    this.getOrSetSearchHistory(searchKey);
  },
  getOrSetSearchHistory:function(key){
    var that = this;
    wx.getStorage({
      key: 'historyKeyList',
      success: function(res) {
          console.log(res.data);

          //console.log(res.data.indexOf(key))
          if(res.data.indexOf(key) >= 0){
            return;
          }

          res.data.push(key);
          wx.setStorage({
            key:"historyKeyList",
            data:res.data,
          });

          that.setData({
            historyKeyList:res.data
          });
      }
    });
  },
  searchValueInput:function(e){
    var value = e.detail.value;
    this.setData({
      searchValue:value,
    });
    if(!value && this.data.productData.length == 0){
      this.setData({
        hotKeyShow:true,
        historyKeyShow:true,
      });
    }
  },
  searchProductData:function(){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Search/searches',
      method:'post',
      data: {
        keyword:that.data.searchValue,
        uid: app.d.userId,
        page:that.data.page,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {   
        var data = res.data.pro;
        that.setData({
          productData:that.data.productData.concat(data),
        });
      },
      fail:function(e){
        wx.showToast({
          title: '网络异常!',
          duration: 2000
        });
      },
    });
  },

});

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 20,378次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-12
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 响应式 Bootstrap 微信公众平台 企业网站 表格式简历模板 单页式简历模板 微信文章 微信模板 自适应
您可能会喜欢的其他模板