文章目錄

• 效果圖
• 功能簡介
• 項(xiàng)目結(jié)構(gòu)
• 代碼
• • citysearch.wxml
  • citysearch.wxss
  • citysearch.js
  • citysearch.json
  • provinces.js
• 留言

效果圖

功能簡介

實(shí)現(xiàn)搜索城市的功能，點(diǎn)擊搜索結(jié)果可提示對應(yīng)的城市，方便二次開發(fā)

熱門城市的顯示(數(shù)據(jù)是寫死的)

項(xiàng)目結(jié)構(gòu)

代碼

citysearch.wxml

<view class="search-box"><icon type="search" size="18" color="#0081ff"></icon><input bindinput="bindKeyInput" placeholder="輸入城市名"></input> </view><view class="result-box"><view class="result-item" data-city="{{item.citysName}}" bindtap="onclick" wx:for="{{result}}" wx:key="index">{{item.txt}}</view> </view><view class="hotcity-title" wx:if="{{result.length==0}}"><view class="title-icon"></view><view class="title-txt">熱門城市</view> </view> <view class="hotcity-box" wx:if="{{result.length==0}}"><view class="hotcity-item" data-city="{{item}}" bindtap="onclick" wx:for="{{hotcity}}" wx:key="index">{{item}}</view> </view>

citysearch.wxss

.search-box{margin: 32rpx 32rpx 18rpx 32rpx;border-radius: 18rpx;box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);background-color: white;display: flex;overflow: hidden;align-items: center; } .search-box input{flex: 1;padding:18rpx 32rpx; } .search-box icon{padding: 18rpx 0 18rpx 18rpx; }.result-box{border-top: gainsboro 1rpx solid; } .result-item{display: flex;padding: 32rpx;border-radius: 8rpx;font-size: 28rpx;border-bottom: gainsboro 1rpx solid;background-color: white;justify-content: space-between;align-items: center; }.hotcity-title{display: flex;padding: 18rpx 32rpx; }.title-icon {width: 10rpx;margin: 12rpx 16rpx 8rpx 0;background-color: #0081ff;border-radius: 50rpx; }.title-txt {font-weight: bold;font-size: 32rpx; }.hotcity-box{margin: 32rpx;display: grid;grid-template-columns: repeat(3, 218rpx);grid-row-gap: 32rpx;grid-column-gap: 18rpx; } .hotcity-item{padding: 12rpx 0;border-radius: 8rpx;text-align: center;color: #333333;background-color: #f0f0f0; }

citysearch.js

const provinces = require('./provinces.js') //引入城市數(shù)組 Page({data: {hotcity: ["廣州市", "北京市", "深圳市", "上海市", "南京市", "杭州市", "武漢市", ],result: []},/*** 搜索城市*/bindKeyInput(e) {var city = e.detail.value//如果輸入為空，返回if (city == '') {this.setData({result: []})return}var result = []provinces.provinces.forEach(item => {item.citys.forEach(res => {if (res.citysName.indexOf(city) == 0) { //使用indexOf()=0 實(shí)現(xiàn)是否以...開頭result.push({citysName: res.citysName,txt: res.citysName + "," + item.provinceName,})}})})this.setData({result: result})},/*** 單擊結(jié)果*/onclick(e){var city = e.currentTarget.dataset.citywx.showToast({icon: 'none',title: city,})} })

citysearch.json

{"usingComponents": {},"navigationBarTitleText": "城市搜索" }

provinces.js

代碼太多就不復(fù)制到這里了，請前往provinces.js，全選復(fù)制粘貼到你新建的provinces.js或者Ctrl+S下載到你的目錄里。

留言

如果有什么不懂或者有BUG，請?jiān)谠u(píng)論區(qū)留言或者加我qq1354760865，我會(huì)在第一時(shí)間回復(fù)！！！

---

目前正在學(xué)習(xí)前端,微信小程序…歡迎關(guān)注，一起學(xué)習(xí)！！！
歡迎訪問我的小程序

總結(jié)

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

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