<s id="mvh2b"><strike id="mvh2b"><u id="mvh2b"></u></strike></s>
    1. <rp id="mvh2b"></rp>

      当前位置:首页 > IT教程

      微信小程序实现城市搜索功能(付源码)

      时间:2021-08-11 18:50:01来源:金橙教程网 作者:admin8 阅读:61次 [手机版]
       

      城市搜索

      文章目录

      • 效果图
      • 功能简介
      • 项目结构
      • 代码
        • citysearch.wxml
        • citysearch.wxss
        • citysearch.js
        • citysearch.JSON
        • Provinces.js
      • 留言

      效果图

      效果图

      功能简介

      1. 实现搜索城市的功能,点击搜索结果可提示对应的城市,方便二次开发
      2. 热门城市的显示(数据是写死的)

      项目结构

      项目结构

      代码

      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') //引入城市数组
      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 实现是否以...开头
                result.push({
                  citysName: res.citysName,
                  txt: res.citysName + "," + item.provinceName,
                })
              }
      
            })
          })
          this.setData({
            result: result
          })
        },
        /**
         * 单击结果
         */
        onclick(e){
          var city = e.currentTarget.dataset.city
          
          wx.showToast({
            icon: 'none',
            title: city,
          })
        }
      })
      

      citysearch.json

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

      provinces.js

      代码太多就不复制到这里了,请前往provinces.js,全选复制粘贴到你新建的provinces.js或者Ctrl+S下载到你的目录里。

      留言

      如果有什么不懂或者有BUG,请在评论区留言或者加我qq1354760865,我会在第一时间回复!!!


      目前正在学习前端,微信小程序…欢迎关注,一起学习!!!

      欢迎访问博客小程序:摸鱼Blog

      在这里插入图片描述

      相关阅读

      网易云抱抱功能在哪?

      最近,因为网抑云这个梗非常火,所以网易云音乐在新版本的APP中上线了&ldquo;抱抱&rdquo;这个功能,很多人不知道抱抱功能在哪?如何触发

      微信怎么开通微店 微信免费开通微店图文教程

      开通微店成为了2014年最热门话题之一,不少商家企业都想乘这移动电商趋势在微店有一番作为。这样就致使了不少人都看重了微信,微信作

      百度地图使用全景功能查看实景地图教程

      先在浏览器的地址栏中输入百度地图网址:map.baidu.com 并打开,如图所示这里以无锡市望湖门为例,在地图搜索框中输入&ldquo;无锡市望

      电脑出现无法定位程序输入点于动态链接库该怎么办?

      不知道大家在打开启动电脑上的一些软件时,是否有弹出过这样的错误提示框,而且你又是如何去解决它的呢,下面我来说下无法定位程序输入

      程序设计模式————编程模式

      设计模式的分类 创建型模式&#xff0c;共五种&#xff1a;工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式

      分享到:

      IT相关

      程序相关

      推荐文章

      热门文章

      东北老女人嫖老头视频_无遮挡H肉动漫视频在线观看_欧美牲交a欧美牲交aⅴ另类_狼人乱码无限2021芒果