小程序实现城市搜索功能

wxml:

<view class="location">推荐</view><button  class="getLocation" bindtap="getLocation" size='mini'>定位</button><view class="hotCity">热门城市</view>
<block  wx:for="{{hotCitys}}"  wx:key="index"> <button class="btn" bindtap="selectcity"  data-val="{{item}}" size="mini"  >{{item}}</button>
</block>

wxss:

/* pages/citys/citys.wxss */
.location,.hotCity{padding:20rpx;font-weight: bold;font-size: 36rpx;
}
.getLocation{color: green;margin-top:20rpx;background: #eee;
}
.btn{margin: 10rpx;font-weight: normal;border-radius: 10rpx;background: #fff;border: 1px  solid  #999;font-size: 30rpx !important;padding: 4rpx  16rpx  !important;
}

js:

// pages/citys/citys.js
var   app=getApp();Page({/*** 页面的初始数据*/data: { hotCitys:["北京", "上海",  "深圳",  "广州",  "武汉",  "荆州",  "荆门"]},//切换热门城市  ......1.点击获取热门城市  2.跳转也买你传递热门城市。。。。。selectcity: function(e){console.log(e);var     citys=e.currentTarget.dataset.val;console.log("获取的城市："+citys);wx.setStorageSync('cityName', citys);wx.switchTab({url: '../food/food',})},getLocation:function(){console.log(app);wx.getLocation({ success:res=>{console.log(res);wx.request({url: 'http://iwenwiki.com:3002/api/lbs/location',data:{latitude:res.latitude,longitude:res.longitude }, success:result=>{console.log(result);var   cityName=result.data.result.ad_info.city.slice(0,2);console.log(cityName);//跳转----食疗坊界面 --把数据传递过去。//  wx.switchTab({//    url: '../food/food',//  })//1.url地址传递参数// wx.reLaunch({//   url: '../food/food?cityName='+cityName,// })//2.  把获取的变量存储给全局app.js里面的全局变量  // app.globalData.cityName=cityName;// wx.switchTab({//   url: '../food/food',// })//3.本地存储wx.setStorageSync('cityName', cityName);console.log("获取存储的值：",wx.getStorageSync('cityName'));wx.switchTab({url: '../food/food',})}})}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//  wx.request({//    url: 'http://iwenwiki.com:3002/api/hot/city',//    success:res=>{//      console.log(res.data);//      this.setData({//        hotCitys:res.data.data//      })//    }//  })},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

搜索页：
wxml:

<!--pages/search/search.wxml--><view  class="seach"><input  bindinput="searchinput"  focus="true"  placeholder="请输入你想要的内容"></input> </view>
<!-- 思路：1. 触发搜索的input事件 获取输入的内容，  bindinput -'函数名'2.输入内容的时候 触发函数bindinput  事件对象event，3.请求搜索的内容--><!-- 搜索的内容 --><import src="../productList/productList.wxml"></import><block  wx:for="{{list}}"  wx:key="index"><template  is="productList"  data="{{item}}"></template></block>

/* pages/search/search.wxss */
@import  '../productList/productList.wxss';page{background:#f5f5f5;
}.seach{padding:20rpx;background:#fff;color: #333;font-size: 30rpx;line-height: 60rpx;height: 60rpx;
}.seach  input{width: 100%;height: 100%;background:#f5f5f5;border-radius: 10rpx;
}

js:

// pages/search/search.js
Page({/*** 页面的初始数据*/data: {},//获取表单input输入的内容searchinput:function(e){console.log("输入的内容",e.detail);if(e.detail.value){wx.request({url: 'http://iwenwiki.com:3002/api/foods/select',data:{name:e.detail.value,city:""},success:res=>{if(res.data.status==200){this.setData({list:res.data.data})}else{console.log(res.data.msg);this.setData({list:[]})}console.log(res.data);}})}else{console.log("输入内容不能为空！");//进行清空数据this.setData({list:[]})}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

效果如图：

小程序实现城市搜索功能相关推荐

微信小程序最全搜索功能
微信小程序最全搜索功能主要功能: 搜索点击x号清空输入框内容点击取消返回上一页面搜索数据为空提示历史记录清空历史记录点击历史记录搜索点击搜索列表带参数返回上一页面代码如下: < ...
微信小程序组件 —— 带搜索功能的选择器
微信小程序组件 -- 带搜索功能的选择器效果组件 search-picker 文件 wxml 文件: <view class="search-picker">< ...
微信小程序开发实现搜索功能
对于搜索都是会有一些需要的,所以搜索页面还是可以复用的.主页面就是下面这样: 这个页面在pages/components/component2/component2.wxml 点击页面中黄色的inp ...
小程序云开发搜索功能的实现正则_几行代码实现小程序云开发提现功能
先看效果: 纯云开发实现,下面说使用步骤:一:开通商户的企业付款到领取功能说明地址: https://pay.weixin.qq.com/wiki/doc/api/tools/mch_pay.php? ...
小程序云开发搜索功能的实现正则_码code | 如何借助小程序云开发实现小程序支付功能...
转载来源:编程小石头我们在做小程序支付相关的开发时,总会遇到这些难题.小程序调用微信支付时,必须要有自己的服务器,有自己的备案域名,有自己的后台开发.这就导致我们做小程序支付时的成本很大. 本节就来 ...
微信小程序实现历史搜索功能（h5同理）
1.实现效果 2.实现原理将数据存在storage中. wx.setStorageSync('search_history', JSON.stringify(this.data.list)) 取数组 ...
小程序-实现列表- 搜索功能的实现（6）
list.wxml引入搜索文件  <include src="/includes/search-bar.wxml"/> 搜索文件 ...
微信小程序如何实现搜索功能
思路: 1.先对input框绑定个search方法进行搜索 2.在js中写sarch方法,利用wx.request查找数据,success成功之后开始查找自己要的数据. 3.根据input框的输入值且 ...
微信小程序使用键盘搜索功能
记录下. 1.name='search';//search内容随便写 2.bindconfirm='shop_search_function'://这个变量是js函数 3.confirm-type=' ...
游戏开发需要具备哪些技术_生鲜小程序需要具备哪些功能板块？生鲜小程序开发...
线上生鲜小程序开发让用户购买蔬菜水果更加便捷,不仅可以有利于发展生鲜行业之后的规模,而且也能够吸引更多的用户,低成本获客.那么,这样一款生鲜小程序需要具备哪些功能板块呢? 线上生鲜小程序需要具备什么? ...

小程序实现城市搜索功能

小程序实现城市搜索功能相关推荐

最新文章

热门文章