独立成一个固定页面

mindawei · Jan 12, 2018 · c1c7aa4 · c1c7aa4
1 parent 59cfb22
commit c1c7aa4
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 65 deletions.
diff --git a/app.json b/app.json
@@ -1,6 +1,7 @@
 {
  "pages":[
- "pages/index/index"
+ "pages/index/index",
+ "pages/search/search"
  ],
  "window":{
  "backgroundTextStyle":"light",

diff --git a/pages/index/index.js b/pages/index/index.js
@@ -1,32 +1,28 @@
 //index.js
-var WxSearch = require('../../wxSearchView/wxSearchView.js');
-
 Page({
- data: {},
-
- // 搜索栏
- onLoad: function () {
-  var that = this;
-  WxSearch.init(
-  that, // 本页面一个引用
- ['杭州', '嘉兴', "海宁", "桐乡", '宁波', '金华'], // 热点搜索推荐，[]表示不使用
- ['湖北', '湖南', '北京',"南京"],// 搜索匹配，[]表示不使用
- that.mySearchFunction // 提供一个搜索回调函数
- );
+ data: {
+ searchValue:''
+ },
+
+ // 搜索页面跳回
+ onLoad: function (options) {
+ if (options && options.searchValue){
+ this.setData({
+  searchValue: "搜索："+options.searchValue
+ });
+ }
  },
 
- // 转发函数,固定部分
- wxSearchInput: WxSearch.wxSearchInput, // 输入变化时的操作
- wxSerchFocus: WxSearch.wxSearchFocus, // 输入框获得焦点 
- wxSearchKeyTap: WxSearch.wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
- wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录
- wxSearchConfirm: WxSearch.wxSearchConfirm, // 搜索函数
- wxSearchClear: WxSearch.wxSearchClear, // 清空函数
- wxSearchBlur: WxSearch.wxSearchBlur, // 失去焦点函数
-
- // 搜索回调函数 
- mySearchFunction: function (value) {
- // do your job here
- console.log("搜索值为:" + value)
+ // 搜索入口 
+ wxSearchTab: function () {
+ wx.redirectTo({
+ url: '../search/search'
+ })
  }
+
+
+
+
+
+
 })
diff --git a/pages/index/index.json b/pages/index/index.json
@@ -1,3 +1,3 @@
 {
- "navigationBarTitleText":"wxSearchView搜索示例"
+ "navigationBarTitleText": "首页"
 }
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
@@ -1 +1,11 @@
-<include src="../../wxSearchView/wxSearchView.wxml" />
+
+<view class="weui-search-bar">
+ <view class="weui-search-bar__form">
+ <view class="weui-search-bar__box">
+ <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
+ <input type="text" class="weui-search-bar__input" disabled='true' placeholder="搜索入口" bindtap="wxSearchTab"/>
+ </view>
+ </view>
+</view>
+
+<view>{{ searchValue}}</view>
diff --git a/pages/search/search.js b/pages/search/search.js
@@ -0,0 +1,44 @@
+//index.js
+var WxSearch = require('../../wxSearchView/wxSearchView.js');
+
+Page({
+ data: {},
+
+ // 搜索栏
+ onLoad: function () {
+ var that = this;
+ WxSearch.init(
+ that, // 本页面一个引用
+ ['杭州', '嘉兴', "海宁", "桐乡", '宁波', '金华'], // 热点搜索推荐，[]表示不使用
+ ['湖北', '湖南', '北京', "南京"],// 搜索匹配，[]表示不使用
+ that.mySearchFunction, // 提供一个搜索回调函数
+ that.myGobackFunction //提供一个返回回调函数
+ );
+ },
+
+ // 转发函数,固定部分
+ wxSearchInput: WxSearch.wxSearchInput, // 输入变化时的操作
+ wxSearchKeyTap: WxSearch.wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
+ wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录
+ wxSearchConfirm: WxSearch.wxSearchConfirm, // 搜索函数
+ wxSearchClear: WxSearch.wxSearchClear, // 清空函数
+
+ // 搜索回调函数 
+ mySearchFunction: function (value) {
+ // do your job here
+ // 跳转
+ wx.redirectTo({
+ url: '../index/index?searchValue='+value
+ })
+ },
+
+ // 返回回调函数
+ myGobackFunction: function (value) {
+ // do your job here
+ // 跳转
+ wx.redirectTo({
+ url: '../index/index?searchValue=返回' 
+ })
+ }
+
+})
diff --git a/pages/search/search.json b/pages/search/search.json
@@ -0,0 +1,3 @@
+{
+ "navigationBarTitleText": "wxSearchView搜索示例"
+}
diff --git a/pages/search/search.wxml b/pages/search/search.wxml
@@ -0,0 +1 @@
+<include src="../../wxSearchView/wxSearchView.wxml" />
diff --git a/pages/search/search.wxss b/pages/search/search.wxss
@@ -0,0 +1 @@
+@import "../../wxSearchView/wxSearchView.wxss";
diff --git a/wxSearchView/wxSearchView.js b/wxSearchView/wxSearchView.js
@@ -18,21 +18,23 @@
 var __tipKeys = [];
 // 搜索回调函数 
 var __searchFunction = null;
+// 返回函数 
+var __goBackFunction = null;
 // 应用变量
 var __that = null;
 
 // 初始化函数
-function init(that, hotKeys, tipKeys, searchFunction) {
+function init(that, hotKeys, tipKeys, searchFunction, goBackFunction) {
 
  __that = that;
  __tipKeys = tipKeys;
  __searchFunction = searchFunction;
+ __goBackFunction = goBackFunction;
 
  var temData = {};
  var barHeight = 43;
  var view = {
- barHeight: barHeight,
- isShow: false,
+ barHeight: barHeight
  }
  temData.hotKeys = hotKeys;
 
@@ -82,50 +84,34 @@ function wxSearchClear() {
  // 更新数据
  temData.value = "";
  temData.tipKeys = [];
- temData.view.isShow = true;
  // 更新视图
  __that.setData({
  wxSearchData: temData
  });
 }
 
-// 输入框获得焦点 
-function wxSearchFocus(e) {
- var temData = __that.data.wxSearchData;
- temData.view.isShow = true;
- __that.setData({
- wxSearchData: temData
- });
-}
-
-// 失去焦点函数
-function wxSearchBlur(e) {
- var temData = __that.data.wxSearchData;
- temData.view.isShow = false;
- __that.setData({
- wxSearchData: temData
- });
-}
-
 // 点击提示或者关键字、历史记录时的操作
 function wxSearchKeyTap(e) {
  search(e.target.dataset.key);
 }
 
 // 确任或者回车
-function wxSearchConfirm() {
- search(__that.data.wxSearchData.value);
+function wxSearchConfirm(e) {
+ var key = e.target.dataset.key;
+ if(key=='back'){
+ __goBackFunction();
+ }else{
+ search(__that.data.wxSearchData.value);
+ }
 }
 
 function search(inputValue) {
  if (inputValue && inputValue.length > 0) {
-
  // 添加历史记录
  wxSearchAddHisKey(inputValue);
- // 隐藏面板
+ // 更新
  var temData = __that.data.wxSearchData;
  temData.value = inputValue;
- temData.view.isShow = false;
  __that.setData({
  wxSearchData: temData
  });
@@ -190,7 +176,6 @@ function wxSearchDeleteAll() {
  var value = [];
  var temData = __that.data.wxSearchData;
  temData.his = value;
- temData.view.isShow = true;
  __that.setData({
  wxSearchData: temData
  });
@@ -202,10 +187,8 @@ function wxSearchDeleteAll() {
 module.exports = {
  init: init, //初始化函数
  wxSearchInput: wxSearchInput,// 输入变化时的操作
- wxSearchFocus: wxSearchFocus, // 输入框获得焦点 
  wxSearchKeyTap: wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
  wxSearchDeleteAll: wxSearchDeleteAll, // 删除所有的历史记录
  wxSearchConfirm: wxSearchConfirm, // 搜索函数
  wxSearchClear: wxSearchClear, // 清空函数
- wxSearchBlur: wxSearchBlur // 失去焦点函数
 }
diff --git a/wxSearchView/wxSearchView.wxml b/wxSearchView/wxSearchView.wxml
@@ -1,19 +1,22 @@
 <view class="weui-search-bar">
- <view class="weui-search-bar__form">
+  <view class="weui-search-bar__form">
  <view class="weui-search-bar__box">
  <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
- <input type="text" class="weui-search-bar__input" placeholder="请输入查询内容" value="{{wxSearchData.value}}" bindfocus="wxSerchFocus" bindblur="wxSearchBlur" bindinput="wxSearchInput" bindconfirm="wxSearchConfirm" />
+ <input type="text" class="weui-search-bar__input" placeholder="请输入查询内容" value="{{wxSearchData.value}}" bindinput="wxSearchInput" bindconfirm="wxSearchConfirm" />
  <view class="weui-icon-clear" wx:if="{{wxSearchData.value.length > 0}}" bindtap="wxSearchClear">
  <icon type="clear" size="14"></icon>
  </view>
  </view>
  </view>
- <view class="weui-search-bar__cancel-btn" bindtap="wxSearchConfirm">搜索</view>
+ <view class="weui-search-bar__cancel-btn" bindtap="wxSearchConfirm">
+ <text wx:if="{{wxSearchData.value.length>0}}" data-key='search'>搜索</text>
+ <text wx:else data-key='back'>返回</text>
+ </view>
 </view>
 
-<view class="wxSearch" style="display:{{wxSearchData.view.isShow ? 'block':'none'}};height:{{wxSearchData.view.seachHeight}}px;top:{{wxSearchData.view.barHeight}}px;">
- <view class="wxSearchInner">
+<view class="wxSearch" style="'block';height:{{wxSearchData.view.seachHeight}}px;top:{{wxSearchData.view.barHeight}}px;">
 
+ <view class="wxSearchInner">
  <!-- 搜索提示部分 -->
  <view class="wxSearchMindKey">
  <view class="wxSearchMindKeyList">
@@ -44,6 +47,5 @@
  </block>
  </view>
  </view>
-
  </view>
 </view>