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({/*** 頁面的初始數(shù)據(jù)*/data: { hotCitys:["北京", "上海", "深圳", "廣州", "武漢", "荊州", "荊門"]},//切換熱門城市 ......1.點擊獲取熱門城市 2.跳轉(zhuǎn)也買你傳遞熱門城市。。。。。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);//跳轉(zhuǎn)----食療坊界面 --把數(shù)據(jù)傳遞過去。// wx.switchTab({// url: '../food/food',// })//1.url地址傳遞參數(shù)// 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',})}})}})},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/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// })// }// })},/*** 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數(shù)--監(jiān)聽頁面顯示*/onShow: function () {},/*** 生命周期函數(shù)--監(jiān)聽頁面隱藏*/onHide: function () {},/*** 生命周期函數(shù)--監(jiān)聽頁面卸載*/onUnload: function () {},/*** 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數(shù)*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

搜索頁：
wxml:

<!--pages/search/search.wxml--><view class="seach"><input bindinput="searchinput" focus="true" placeholder="請輸入你想要的內(nèi)容"></input> </view> <!-- 思路：1. 觸發(fā)搜索的input事件 獲取輸入的內(nèi)容， bindinput -'函數(shù)名'2.輸入內(nèi)容的時候 觸發(fā)函數(shù)bindinput 事件對象event，3.請求搜索的內(nèi)容--><!-- 搜索的內(nèi)容 --><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({/*** 頁面的初始數(shù)據(jù)*/data: {},//獲取表單input輸入的內(nèi)容searchinput:function(e){console.log("輸入的內(nèi)容",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("輸入內(nèi)容不能為空！");//進行清空數(shù)據(jù)this.setData({list:[]})}},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數(shù)--監(jiān)聽頁面顯示*/onShow: function () {},/*** 生命周期函數(shù)--監(jiān)聽頁面隱藏*/onHide: function () {},/*** 生命周期函數(shù)--監(jiān)聽頁面卸載*/onUnload: function () {},/*** 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數(shù)*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

效果如圖：

總結(jié)

以上是生活随笔為你收集整理的小程序实现城市搜索功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。