wxd / MShopWeApp

Commit 53bd290da362c529611d242ffbee0b08543621c2

Authored by yvan.ni
1 parent 70b5e9d5

小程序自定义搜索框希望能搜索历史的

Inline Side-by-side
Showing 3 changed files with 70 additions and 26 deletions
components/diy_searchbox/diy_searchbox.js
  View file @53bd290
... ... @@ -19,6 +19,8 @@ Component({
19 19 inputShowed:1,
20 20 inputval:'在店铺内搜索',
21 21 keyword:'',
  22 +
  23 + searchRecord: [],
22 24 },
23 25 ready: function() {
24 26 var th=this;
... ... @@ -27,7 +29,27 @@ Component({
27 29 if(e.hot_keywords)
28 30 th.setData({keyword:e.hot_keywords});
29 31 })
  32 +
  33 + var arr=wx.getStorageSync('searchRecord') || [] //若无存储则为空
  34 +
  35 + this.setData({
  36 + searchRecord: arr
  37 + });
  38 +
  39 + },
  40 +
  41 +
  42 + pageLifetimes:{
  43 + //要处理一下，游客登录后的界面的变化,主要还该是改变会员
  44 + show: function () {
  45 + var th=this;
  46 + var arr=wx.getStorageSync('searchRecord') || [] //若无存储则为空
  47 + this.setData({
  48 + searchRecord: arr,inputval:'',first:1,is_his:0
  49 + });
  50 + }
30 51 },
  52 +
31 53 methods: {
32 54 //智能跳转
33 55 go_url:function (e) {
... ... @@ -41,17 +63,23 @@ Component({
41 63 return false;
42 64 }
43 65 this.setData({first:0,inputShowed:1,inputval:''});
44   -
45   -
46   -
47   -
48   - },
  66 +
  67 + },
  68 + inputFocus:function(){
  69 + if(this.data.is_init) return false;
  70 + this.setData({is_his:1,})
  71 + },
49 72  
50   - onblur:function(){
51   - var val=this.data.inputval;
52   - if(val==''){
53   - this.setData({first:1,});
54   - }
  73 + onblur:function(){
  74 + var th=this;
  75 + setTimeout(function(){
  76 + if(th.data.click_sear) return false;
  77 + var val=th.data.inputval;
  78 + if(val==''){
  79 + th.setData({first:1,});
  80 + }
  81 + th.setData({is_his:0,})
  82 + },300)
55 83 },
56 84 set_input:function(e){
57 85 var val=e.detail.value;
... ... @@ -60,7 +88,23 @@ Component({
60 88 sear:function(){
61 89 var url="/pages/goods/search/search?s_key="+this.data.inputval;
62 90 getApp().goto(url);
63   - }
  91 + },
  92 +
  93 + del_his:function(){
  94 + this.setData({
  95 + searchRecord: []
  96 + });
  97 + wx.setStorage({ key: 'searchRecord', data:[]});
  98 + },
  99 +
  100 + sear_key:function(e){
  101 + this.data.click_sear=1;
  102 + var str=e.currentTarget.dataset.item;
  103 + var url="/pages/goods/search/search?s_key="+str;
  104 + this.data.click_sear=0;
  105 + getApp().goto(url);
  106 +
  107 + },
64 108  
65 109 }
66 110 })
67 111 \ No newline at end of file
... ...
components/diy_searchbox/diy_searchbox.wxml
  View file @53bd290
... ... @@ -3,7 +3,7 @@
3 3 <!-- first -->
4 4 <block wx:if="{{object.style==1}}">
5 5 <view class='ss' style="position: relative;">
6   - <view bindtap='click_sear' class="s1_gk_a1" wx:if="{{false}}">
  6 + <view bindtap='click_sear' class="s1_gk_a1" wx:if="{{first}}">
7 7 <view class='s_ge'>
8 8 <image src='{{imghost}}/miniapp/images/search.png'></image>
9 9 <text>在店铺内搜索</text>
... ... @@ -13,14 +13,14 @@
13 13 <view class="s1_gk_a1" wx:else>
14 14 <view class='s_ge flex'>
15 15 <image class="find_img" src='{{imghost}}/miniapp/images/search.png' bindtap='sear'></image>
16   - <input id="find_inp" class="find_inp" value=""
  16 + <input id="find_inp" class="find_inp" value="{{inputval}}" bindfocus="inputFocus"
17 17 bindconfirm="sear" bindinput='set_input' focus="{{inputShowed}}" bindblur="onblur" />
18 18 </view>
19   - <view class="his_str his_str1">
20   - <view class="item">2121</view>
21   - <view class="item">2121</view>
22   - <view class="item">2121</view>
23   - <view class="clear">清除</view>
  19 + <view class="his_str his_str1" wx:if="{{searchRecord.length>0}}">
  20 + <block wx:for="{{searchRecord}}">
  21 + <view class="item" bindtap="sear_key" data-item="{{item}}" >{{item}}</view>
  22 + </block>
  23 + <view wx:if="{{searchRecord.length>0}}" class="clear" bindtap="del_his">清除</view>
24 24 </view>
25 25 </view>
26 26  
... ... @@ -45,20 +45,20 @@
45 45 <!-- <view class="pr"> -->
46 46 <view class="flex ali-c">
47 47 <text style="font-size: 40rpx;" class="iconfont icon-search" bindtap='sear'></text>
48   - <input id="find_inp" class="find_inp2" value=""
  48 + <input id="find_inp" class="find_inp2" value="{{inputval}}" bindblur="onblur" bindfocus="inputFocus"
49 49 bindconfirm="sear" bindinput='set_input' focus="{{inputShowed}}"/>
50 50 </view>
51   - <view class="his_str his_str2">
52   - <view class="item">2121</view>
53   - <view class="item">2121</view>
54   - <view class="item">2121</view>
55   - <view class="clear">清除</view>
  51 + <view class="his_str his_str2" wx:if="{{searchRecord.length>0 && is_his}}">
  52 + <block wx:for="{{searchRecord}}">
  53 + <view class="item" bindtap="sear_key" data-item="{{item}}">{{item}}</view>
  54 + </block>
  55 + <view wx:if="{{searchRecord.length>0}}" class="clear" bindtap="del_his">清除</view>
56 56 </view>
57 57 <!-- wx:if="{{inputShowed}}" -->
58 58  
59 59 <!-- </view> -->
60 60  
61   -
  61 +
62 62 </view>
63 63 </view>
64 64 <view class='s2_right'>
... ...
components/diy_searchbox/diy_searchbox.wxss
  View file @53bd290
... ... @@ -140,7 +140,7 @@
140 140 .item {
141 141 padding: 0 20rpx;
142 142 border-bottom: 2rpx solid #f0f0f0;
143   - line-height: 60rpx;
  143 + line-height: 60rpx; text-align: left;
144 144 }
145 145 /* .item ~ .item {
146 146 border-top: 2rpx solid #f0f0f0;
... ...