wxd / MShopWeApp

Commit f799169001d010524e38c5b8bf1931894890d2a1

Authored by 前端开发-罗建龙
1 parent 8b708855

搜索组件优化

Inline Side-by-side
Showing 3 changed files with 29 additions and 14 deletions
components/diy_searchbox/diy_searchbox.js
  View file @f799169
... ... @@ -9,6 +9,14 @@ Component({
9 9 type: Object,
10 10 value: null,
11 11 },
  12 + transparent: {
  13 + type: Number,
  14 + value: 0,
  15 + },
  16 + nav_backgroundColor: {
  17 + type: String,
  18 + value: '',
  19 + },
12 20 },
13 21 data: {
14 22 // 这里是一些组件内部数据
... ...
components/diy_searchbox/diy_searchbox.wxml
  View file @f799169
1 1 <!--pages/diy_ss/diy_ss.wxml-->
2 2 <!-- wx:if="{{object.style==1}}" -->
3   - <!-- first -->
  3 + <!-- first -->
4 4 <block wx:if="{{object.style==1}}">
5   - <view class='ss' style="position: relative;background-color: #fff">
6   - <view bindtap='click_sear' class="s1_gk_a1" wx:if="{{first}}">
7   - <view class='s_ge'>
  5 + <view class='ss' style="position: relative;{{transparent ? '' : (nav_backgroundColor ? ('background-color:' + nav_backgroundColor) : 'background-color:#fff;')}}">
  6 + <view bindtap='click_sear' class="s1_gk_a1 " wx:if="{{first}}">
  7 + <view class="s_ge {{object.is_bord==1 ? 'is_bord' : ''}}" style="text-align: {{object.searchbox_center}};">
8 8 <image src='{{imghost}}/miniapp/images/search.png'></image>
9   - <text>请输入商品关键字</text>
  9 + <text wx:if="{{object.searchbox_text}}">{{object.searchbox_text}}</text>
  10 + <text wx:else>请输入商品关键字</text>
10 11 </view>
11 12 </view>
12 13 <!-- 响应搜索事件 -->
... ... @@ -19,7 +20,7 @@
19 20 <view class="his_str his_str1" wx:if="{{searchRecord.length>0}}">
20 21 <block wx:for="{{searchRecord}}">
21 22 <view class="item" bindtap="sear_key" data-item="{{item}}" >{{item}}</view>
22   - </block>
  23 + </block>
23 24 <view wx:if="{{searchRecord.length>0}}" class="clear" bindtap="del_his">清除</view>
24 25 </view>
25 26 </view>
... ... @@ -32,14 +33,16 @@
32 33 <view style="position: relative;">
33 34 <view style='background-color:{{object.top_bgcolor}}; display: flex; align-items: center; justify-content: space-around;padding:16rpx 0;'>
34 35 <view class='s2_left'>
35   - <navigator open-type="switchTab" url="/pages/goods/categoryList/categoryList" class="s1_gk_a1">
36   - <image src='{{imghost}}/miniapp/images/model/nav.png' style="margin:0;position: relative;left: 6rpx"></image>
  36 + <navigator open-type="switchTab" url="/pages/goods/categoryList/categoryList" class="s1_gk_a1 ">
  37 + <image wx:if="{{object.leftImage}}" src='{{object.leftImage}}' style="margin:0;position: relative;left: 6rpx"></image>
  38 + <image wx:else src='{{imghost}}/miniapp/images/model/nav.png' style="margin:0;position: relative;left: 6rpx"></image>
37 39 </navigator>
38 40 </view>
39   - <view class='s2_cen' style='background-color:{{object.inner_bgcolor}}'>
40   - <navigator wx:if="{{first}}" bindtap='click_sear' class="s1_gk_a2 flex" style='height: 100%;color:{{object.word_color?object.word_color:"#fff"}}'>
  41 + <view class="s2_cen {{object.is_bord==1 ? 'is_bord' : ''}}" style='background-color:{{object.inner_bgcolor}}'>
  42 + <navigator wx:if="{{first}}" bindtap='click_sear' class="s1_gk_a2 flex " style='height: 100%;color:{{object.word_color?object.word_color:"#fff"}};'>
41 43 <text class="iconfont icon-search" style="font-size: 40rpx;"></text>
42   - <text>请输入商品关键字</text>
  44 + <text wx:if="{{object.searchbox_text}}">{{object.searchbox_text}}</text>
  45 + <text wx:else>请输入商品关键字</text>
43 46 </navigator>
44 47 <view wx:else class="s1_gk_a2" style='color:{{object.word_color?object.word_color:"#fff"}}'>
45 48 <!-- <view class="pr"> -->
... ... @@ -63,7 +66,8 @@
63 66 </view>
64 67 <view class='s2_right'>
65 68 <navigator open-type="switchTab" url="/pages/cart/cart/cart" class="s1_gk_a1">
66   - <image src='{{imghost}}/miniapp/images/model/car.png' style="margin:0;;"></image>
  69 + <image wx:if="{{object.rightImage}}" src='{{object.rightImage}}' style="margin:0;;"></image>
  70 + <image wx:else src='{{imghost}}/miniapp/images/model/car.png' style="margin:0;;"></image>
67 71 </navigator>
68 72 </view>
69 73  
... ...
components/diy_searchbox/diy_searchbox.wxss
  View file @f799169
... ... @@ -7,7 +7,7 @@
7 7 }
8 8  
9 9 .s_ge{
10   - width: 700rpx;
  10 + /* width: 700rpx; */
11 11 height: 70rpx;
12 12 text-align: center;
13 13 border-radius: 8rpx;
... ... @@ -15,6 +15,7 @@
15 15 background: #fff none repeat scroll 0 0;
16 16 border: 2px solid #eee;
17 17 line-height: 64rpx;
  18 + padding: 0 10rpx;
18 19 }
19 20  
20 21 .s_ge image{
... ... @@ -153,7 +154,9 @@
153 154 color: #FF5B5A;
154 155 font-size: 26rpx;
155 156 }
156   -
  157 +.is_bord{
  158 + border-radius: 30rpx !important;
  159 +}
157 160 /* .w100 {
158 161 width: 100%;
159 162 box-sizing: border-box;
... ...