luoye / littleApp_child

Download as
Browse Code »

Commit ad6eb679b9570c49ab8468dd094a240034fd59c8

Authored by luoye
1 parent 93cac66c93
Exists in master and in 2 other branches dev-wrh, dev_wjl

搜索页面

Showing 12 changed files with 227 additions and 2 deletions

littleApp_child/app.json View file @ ad6eb67
1 1 {
2 2 "pages": [
  3 +
  4 + "pages/SearchPage/SearchPage",
3 5 "pages/childcare_knowledge/childcare_knowledge",
4 6 "pages/home/home",
5 7 "pages/login/login",
littleApp_child/app.wxss View file @ ad6eb67
1 1 /**app.wxss**/
2 2 @import 'weui.wxss';
  3 +@import "utils/util_UI.wxss";
  4 +
3 5 .container {
4 6 height: 100%;
5 7 display: flex;
... ... @@ -62,5 +64,11 @@
62 64 display: -webkit-box;
63 65 -webkit-box-orient: vertical;
64 66 -webkit-line-clamp: 1;
  67 +}
  68 +
  69 +.input-placeholder {
  70 + font-size: 14px;
  71 + color: #999999;
  72 + letter-spacing: 0;
65 73 }
littleApp_child/pages/SearchPage/SearchPage.js View file @ ad6eb67
  1 +//index.js
  2 +//获取应用实例
  3 +var app = getApp()
  4 +Page({
  5 + data: {
  6 + selectHide: false,
  7 + inputValue: '',
  8 + getSearch: [],
  9 + modalHidden: true,
  10 + searching:false
  11 + },
  12 +
  13 + onLoad: function () {
  14 +
  15 + },
  16 + onShow: function () {
  17 + var getSearch = wx.getStorageSync('searchData');
  18 + this.setData({
  19 + getSearch: getSearch,
  20 + inputValue: ''
  21 + })
  22 + console.log('search is onshow', getSearch)
  23 + },
  24 + /*-------------------- 交互----------*/
  25 + // 设置缓存
  26 + setSearchStorage: function () {
  27 + let data;
  28 + let localStorageValue = [];
  29 + if (this.data.inputValue != '') {
  30 + //调用API从本地缓存中获取数据
  31 + var searchData = wx.getStorageSync('searchData') || []
  32 + searchData.push(this.data.inputValue)
  33 + wx.setStorageSync('searchData', searchData)
  34 + this.setData({
  35 + getSearch: searchData,
  36 + })
  37 + } else {
  38 + console.log('空白')
  39 + }
  40 + },
  41 + // 加载数据
  42 + loadData(){
  43 +
  44 + },
  45 + /*-------------------- 交互----------*/
  46 + // 返回
  47 + back: function () {
  48 + wx.navigateBack({
  49 + })
  50 + },
  51 + // 清除输入框
  52 + clearInput: function () {
  53 + this.setData({
  54 + inputValue: ''
  55 + })
  56 + },
  57 + // 输入完成
  58 + inputEnd:function(e){
  59 + this.setData({
  60 + inputValue: e.detail.value,
  61 + searching: true
  62 + })
  63 + this.setSearchStorage()
  64 + },
  65 + // 清除所有历史
  66 + clearAll: function () {
  67 + wx.setStorageSync('searchData', [])
  68 + this.setData({
  69 + getSearch: [],
  70 + })
  71 + },
  72 + // 选择该项历史
  73 + selectThis: function (e) {
  74 +
  75 + },
  76 + // 删除该项历史
  77 + deletThis: function (e) {
  78 + console.log(e)
  79 +
  80 + var data = this.data.getSearch
  81 + data.splice(e.currentTarget.dataset.index,1)
  82 + this.setData({
  83 + getSearch: data
  84 + })
  85 + },
  86 + bindInput: function (e) {
  87 + this.setData({
  88 + inputValue: e.detail.value
  89 + })
  90 + console.log('bindInput' + this.data.inputValue)
  91 + }
  92 +})
littleApp_child/pages/SearchPage/SearchPage.json View file @ ad6eb67
  1 +{
  2 + "navigationBarBackgroundColor": "#48C17B",
  3 + "navigationBarTitleText": "妈咪Baby",
  4 + "navigationBarTextStyle": "white",
  5 + "backgroundColor": "#d8dbd4"
  6 +}
littleApp_child/pages/SearchPage/SearchPage.wxml View file @ ad6eb67
  1 +<view class="backgroundView">
  2 + <view class="searchBar_bg">
  3 + <view class="searchBar_bar">
  4 + <image src="../../source/magnifying_glass.png" class="searchBar_icon"></image>
  5 + <input class="searchBar_input" id="search" name="search" placeholder="请输入" value="{{inputValue}}" placeholder-class="input-placeholder" bindfocus="getFocus" confirm-type="搜索" bindconfirm="inputEnd"/>
  6 + <image src="../../source/clear_input.png" bindtap="clearInput" class="searchBar_clear"></image>
  7 + </view>
  8 + <view class="searchBar_bar_cancle" bindtap="back">取消</view>
  9 + </view>
  10 + <!-- 搜索历史 -->
  11 + <view class="history_list" wx:if="{{getSearch.length > 0 && !searching}}">
  12 + <view class="history_list_content">
  13 + <block wx:for="{{getSearch}}">
  14 + <navigator class="history_list_cell util_bottom_line" bindtap="selectThis">
  15 + <image src="../../source/search_history.png" class="history_list_cell_clock"></image>
  16 + <view class="history_list_cell_text">{{item}}</view>
  17 + <image src="../../source/dele_search_history.png" class="history_list_cell_dele" bindtap="deletThis" data-index="{{index}}"></image>
  18 + </navigator>
  19 + </block>
  20 + </view>
  21 + <view class="history_list_clearAll" bindtap="clearAll">清除历史记录</view>
  22 + </view>
  23 +</view>
littleApp_child/pages/SearchPage/SearchPage.wxss View file @ ad6eb67
  1 +@import "../../utils/util_UI.wxss";
  2 +
  3 +.searchBar_bg {
  4 + background: #48C17B;
  5 + width: 100%;
  6 + height: 38px;
  7 + position: fixed;
  8 + top: 0;
  9 +}
  10 +.searchBar_bar {
  11 + background: white;
  12 + height: 32px;
  13 + margin-left: 15px;
  14 + margin-right: 52px;
  15 + display: flex;
  16 + align-items: center;
  17 + border-radius: 4px;
  18 +}
  19 +.searchBar_icon {
  20 + height: 22px;
  21 + width: 22px;
  22 + margin-left: 2px;
  23 +}
  24 +.searchBar_input {
  25 + height: 32px;
  26 + width: 90%;
  27 + margin-left: 2px;
  28 + font-size: 14px;
  29 + color: #999999;
  30 + line-height: 14px;
  31 +}
  32 +.searchBar_clear {
  33 + float: right;
  34 + height: 18px;
  35 + width: 18px;
  36 + transform: translateX(-6px);
  37 +}
  38 +
  39 +.searchBar_bar_cancle {
  40 + color: white;
  41 + font-size: 14px;
  42 + letter-spacing: 0;
  43 + float: right;
  44 + margin-right: 15px;
  45 + transform: translateY(-26px);
  46 +}
  47 +
  48 +.history_list {
  49 + background: white;
  50 + margin-top: 40px;
  51 + min-height: 288px;
  52 + display: flex;
  53 + flex-direction: column;
  54 + justify-content: space-between;
  55 +}
  56 +
  57 +.history_list_cell {
  58 + height: 40px;
  59 + display: flex;
  60 + align-items: center;
  61 + width: 100%;
  62 +}
  63 +
  64 +.history_list_cell_clock {
  65 + height: 19px;
  66 + width: 22px;
  67 + display: inline-block;
  68 + margin-left: 15px;
  69 +}
  70 +
  71 +.history_list_cell_text {
  72 + font-size: 14px;
  73 + color: #333333;
  74 + letter-spacing: 0;
  75 + margin-right: 20px;
  76 + margin-left: 7px;
  77 + width: 90%;
  78 +}
  79 +
  80 +.history_list_cell_dele {
  81 + height: 13px;
  82 + width: 12px;
  83 + margin-right: 15px;
  84 +}
  85 +
  86 +.history_list_clearAll {
  87 + font-size: 12px;
  88 + color: #999999;
  89 + letter-spacing: 0;
  90 + width: 100%;
  91 + text-align: center;
  92 + height: 40px;
  93 + line-height: 40px;
  94 +}
littleApp_child/pages/home/home.wxss View file @ ad6eb67
1   -@import "../../utils/util_UI.wxss";
  1 +
2 2  
3 3 /*通用*/
4 4 text {
littleApp_child/source/clear_input.png View file @ ad6eb67

936 Bytes
littleApp_child/source/dele_search_history.png View file @ ad6eb67

1020 Bytes
littleApp_child/source/magnifying_glass.png View file @ ad6eb67

1.28 KB
littleApp_child/source/search_history.png View file @ ad6eb67

1.28 KB
littleApp_child/utils/util_UI.wxss View file @ ad6eb67
... ... @@ -52,6 +52,6 @@
52 52 }
53 53  
54 54 .util_bottom_line {
55   - border-bottom: 1px solid #f4879b;
  55 + border-bottom: 1px solid #e2e2e2;
56 56 }