微信小程序城市选择及搜索功能的方法

实现搜索城市功能

参考 微信小程序 之『仿美团城市选择 城市切换』
https://github.com/cinoliu/-selectCity

js文件

// pages/address/address.js
var app = getApp()

Page({
 data: {
  searchLetter: [],
  showLetter: "",
  winHeight: 0,
  cityList: [],
  isShowLetter: false,
  scrollTop: 0,//置顶高度
  scrollTopId: '',//置顶id
  city: "",
  cityList_search:[],
  address_show:false,
  search_city:[],
  is_data:true,
  empty:'',
 },
 onLoad: function (options) {
  console.log(options.currentcity)

  // 生命周期函数--监听页面加载
  let that = this;
  that.setData({
   city: options.currentcity
  })
  var searchLetter = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"];
  new Promise(function (resolve) {
   that.getCity(function (data) {
    console.log(data)
    let cityObj = data.cityList;
    var tempObj = [];
    for (var i = 0; i < searchLetter.length; i++) {
     var initial = searchLetter[i];
     var cityInfo = [];
     var tempArr = {};
     tempArr.initial = initial;
     for (var j = 0; j < cityObj.length; j++) {
      if (initial == cityObj[j].initial) {
       cityInfo.push(cityObj[j]);
      }
     }
     tempArr.cityInfo = cityInfo;
     tempObj.push(tempArr);
    }
    console.log(tempObj)
    that.setData({
     cityList: tempObj
    })
    resolve(tempObj);
   })

  }).then(function(res){
   console.log(res)
   let cityObj = [];
   var sysInfo = wx.getSystemInfoSync();
   var winHeight = sysInfo.windowHeight;
   var itemH = winHeight / searchLetter.length;
   var tempObj = [];
   for (var i = 0; i < searchLetter.length; i++) {
    var temp = {};
    temp.name = searchLetter[i];
    temp.tHeight = i * itemH;
    temp.bHeight = (i + 1) * itemH;
    tempObj.push(temp)
   }
   that.setData({
    winHeight: winHeight,
    itemH: itemH,
    searchLetter: tempObj,
   })
  })
 },
 getCity: function (callBack){
  let that = this;
  app.commonRequest('wxapp/public/getCityList', 'POST', {}, function (data) {
    console.log(data);
     if (data.status == '200') {
      that.setData({
       cityList: data.datainfo.list,
       // city: data.datainfo.getcode,
      })
      callBack({
       cityList: data.datainfo.list
      })
     } else {
      callBack({
       cityList: data.datainfo.list
      })
     }
  })
 },
 set_current_city:function(set_city,callBack){
  let that = this;
  app.commonRequest('wxapp/public/getCityList', 'POST', {
   area_name: set_city,
   cityCheckType:1,
  }, function (data) {
   console.log(data)
   if (data.status == "200") {
    callBack({
     data: data
    })
   }else {
    callBack({
     data: data
    })
   }
  })
 },
 search_city:function(e){
  let that =this;
  that.setData({
   address_show:true
  })

 },
 cancel_city:function(e){
  let that = this;
  that.setData({
   search_city:[],
   address_show: false,
   empty:'',
  })
 },
 seacrch_city:function(e){
  let that =this;
  let search_val = e.detail.value;
  console.log(search_val);
  app.commonRequest('wxapp/public/getCityList', 'POST', {
   area_name: search_val
  }, function (data) {
   console.log(data)
   if(data.status == "200"){
    if (data.datainfo.list.length >0){
     that.setData({
      search_city: data.datainfo.list,
      is_data: true
     })
    }
    else{
     that.setData({
      search_city: data.datainfo.list,
      is_data:false
     })
    }
   }
  })  

 },
 clickLetter: function (e) {
  console.log(e.currentTarget.dataset.letter)
  var showLetter = e.currentTarget.dataset.letter;
  this.setData({
   showLetter: showLetter,
   isShowLetter: true,
   scrollTopId: showLetter,
  })
  var that = this;
  setTimeout(function () {
   that.setData({
    isShowLetter: false
   })
  }, 1000)
 },
 //选择城市
 bindCity: function (e) {
  let that = this;
  console.log("bindCity");
  that.set_current_city(e.currentTarget.dataset.city,function(data){
   console.log(data)
  });
  wx.setStorageSync('currentcity', e.currentTarget.dataset.city)
  // that.onLoad();
  this.setData({
   city: e.currentTarget.dataset.city,
   // scrollTop: 0,
  })
  // 回到首页
  wx.switchTab({
   url: '/pages/index/index'
  })
 },
})

wxml文件

<!--pages/address/address.wxml-->
<view class="searchLetter touchClass">
 <view class="thishotText" bindtap="hotCity">
  <view style="margin-top:0;">当前</view>
  <!-- <view style="margin-top:0;">热门</view> -->
 </view>
 <view wx:for="{{searchLetter}}" style="color:#53985F;font-size:20rpx;" wx:key="index" data-letter="{{item.name}}" catchtouchend="clickLetter" >{{item.name}}</view>
</view>
<block wx:if="{{isShowLetter}}">
 <view class="showSlectedLetter">
  {{showLetter}}
 </view>
</block>
<scroll-view scroll-y="true" style="height:{{winHeight}}px"
 scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}">
 <view class='searchbox'>
   <view class='input_box'>
    <image class='search' src='/images/search.png'></image>
    <input placeholder='城市' onchange="seacrch_city" oninput="seacrch_city" onblur="seacrch_city" value='{{empty}}' bindtap='search_city'></input>
    <view class='close' bindtap='cancel_city'>×</view>
   </view>
   <view class='cancel' bindtap='cancel_city'>取消</view>
  </view>
 <view id='address' hidden='{{address_show}}'>
  <view class='current_city li_style'>当前:{{city}}</view>
  <view class='all_city'>
   <view class='li_style'>所有城市</view>
  </view>
  <view class="selection" wx:for="{{cityList}}" wx:key="{{item.initial}}">
   <view class="item_letter" id="{{item.initial}}">{{item.initial}}</view>
   <view class="item_city" wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="{{ct.id}}" data-cityCode="{{ct.area_code}}" data-city="{{ct.area_name}}" bindtap="bindCity">
    {{ct.area_name}}
   </view>
  </view>
 </view>
 <view id='address_search' hidden='{{!address_show}}'>
  <view>
   <view class="item_city" wx:for="{{search_city}}" wx:for-item="ct" wx:key="{{ct.id}}" data-cityCode="{{ct.area_code}}" data-city="{{ct.area_name}}" bindtap="bindCity">
    {{ct.area_name}}
   </view>
   <view class='noData' hidden='{{is_data}}'>暂无数据</view>
  </view>
 </view>
</scroll-view>

wxss文件

/* pages/address/address.wxss */

.searchbox{
 overflow: hidden;
 margin: 0 20rpx;
}
.search{
 width: 20px;
 height: 20px;
 float: left;
 margin:7rpx 10rpx;
}
.input_box{
 width: 630rpx;
 height: 50rpx;
 background: #efefef;
 border-radius: 30rpx;
 float: left;
}
.input_box input{
 font-size: 25rpx;
 width: 450rpx;
 float: left;
}
.input_box .close{
 width:30rpx;
 height:30rpx;
 background:#aaa;
 color:#fff;
 border-radius:50%;
 float:right;
 margin-right:20rpx;
 margin-top:10rpx;
 line-height:27rpx;
 font-size:30rpx;
 text-align:center;
}
.searchbox .cancel{
 font-size: 25rpx;
 color: #53985F;
 width: 80rpx;
 text-align: right;
 float: right;
 line-height: 50rpx;
}
.current_city{
 border-bottom: 1rpx solid #eee;
}
.li_style{
 height: 50rpx;
 padding: 20rpx 0;
 width: 710rpx;
 line-height: 50rpx;
 font-size: 29rpx;
 margin:0 20rpx;
}

.searchLetter {
 position: fixed;
 right: 0;
 width: 50rpx;
 text-align: center;
 justify-content: center;
 display: flex;
 flex-direction: column;
 color: #666;
 z-index: 1;
}

.searchLetter view {
 margin-top: 20rpx;
}

.touchClass {
 background-color: #fff;
 color: #fff;
 top: 100rpx;
}

.showSlectedLetter {
 background-color: rgba(0, 0, 0, 0.5);
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 top: 50%;
 left: 50%;
 margin: -100rpx;
 width: 200rpx;
 height: 200rpx;
 border-radius: 20rpx;
 font-size: 52rpx;
 z-index: 1;
}

.selection {
 display: flex;
 width: 100%;
 flex-direction: column;
 margin-top: 10rpx;
}

.item_letter {
 display: flex;
 background-color: #f5f5f5;
 height: 50rpx;
 padding-left: 34rpx;
 align-items: center;
 font-size: 24rpx;
 color: #666;
}

.item_city {
 display: flex;
 background-color: #fff;
 height: 100rpx;
 padding-left: 34rpx;
 align-items: center;
 border-bottom: 1rpx solid #ededed;
 font-size: 24rpx;
 color: #666;
}

.hotcity-common {
 font-size: 24rpx;
 color: #666;
 padding: 0 0 0 30rpx;
}

.thisCity {
 padding-top: 30rpx;
}

.thisCityName {
 display: inline-block;
 border: 1rpx solid #2ab4ff;
 border-radius: 8rpx;
 padding: 10rpx 0;
 font-size: 24rpx;
 color: #2ab4ff;
 text-align: center;
 min-width: 149.5rpx;
 margin: 20rpx 0 20rpx 30rpx;
}

.thishotText {
 color: #53985F;
 font-size: 20rpx;
 margin: 0 !important;
}

.slectCity {
 border-color: #2ab4ff !important;
}

.slectCity view {
 color: #2ab4ff !important;
}

.weui-grid {
 position: relative;
 float: left;
 padding: 10rpx 0;
 width: 149.5rpx;
 box-sizing: border-box;
 border: 1rpx solid #ececec;
 border-radius: 8rpx;
 margin: 10rpx 12rpx;
}

.weui-grid__label {
 display: block;
 text-align: center;
 color: #333;
 font-size: 24rpx;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}
.noData{
 text-align: center;
 font-size: 30rpx;
 color: #aaa;
 line-height: 60rpx;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序搜索功能(附:小程序前端+PHP后端)

    开发需求 微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路. 流程 1.表单(输入框.提交按钮.提交的name值) 2.接收表单数据(js获取表单name=keyword的值) 3.通过wx.request向服务器后端发起请求查询数据库 4.返回JSON格式的数据给小程序,js解析渲染到小程序前端展示 界面 代码 index.wxml <!-- 标题 --> <view class="title&quo

  • 小程序实现搜索界面 小程序实现推荐搜索列表效果

    本文实例为大家分享了小程序实现搜索界面的具体代码,供大家参考,具体内容如下 效果图: 实现代码: <view class="page"> <view class="page__bd"> <view class="weui-search-bar"> <view class="weui-search-bar__form"> <view class="weui-sear

  • 微信小程序实现搜索功能并跳转搜索结果页面

    本文实例为大家分享了微信小程序实现搜索功能,并跳转搜索结果页面,供大家参考,具体内容如下 搜索页面: search.wxml页面: <view class="form"> <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="请输入搜索关键字" type="text" /> </view

  • 小程序获取当前位置加搜索附近热门小区及商区的方法

    本文详细的介绍了小程序获取当前位置加搜索附近热门小区及商区的方法,分享给大家 两种方法:一种是腾讯地图获取,另一种是百度地图获取 我用的是腾讯地图获取步骤如下 1.话不多说,直接上干货 实现上图效果,主要技术是获取微信小程序地理位置,得到经纬度,使用微信小程序JavaScript SDK逆地址解析和地点搜索实现 2.微信小程序JavaScript SDK 申请开发者密钥(key):https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.h

  • 微信小程序结合Storage实现搜索历史效果

    本文实例为大家分享了微信小程序实现搜索历史效果的具体代码,供大家参考,具体内容如下 实现目标 代码实现 集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单. <!-- wxml --> <view class="search-box"> <view class='icon'> <image src='../../assets/search.png' mode='width

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    就在昨天,微信宣布了微信小程序开发者工具新增"云开发"功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击 分类导航时,会触发这个方法,并传回当前点击

  • 微信小程序实现搜索历史功能

    结合了微信给的资料,马马虎虎摸索出了一些东西,下面说下一下微信小程里序搜索历史功能的实现,下图是实现效果. 首先,定义历史记录的显示风格和方式,在下用的是列表模式,没有使用什么比较酷炫的套路. <view wx:for="{{sercherStorage}}" wx:key="item.id"> <view class="liclass" style="color:#9E9E9E;border-bottom:0;fon

  • 微信小程序搜索组件wxSearch实例详解

    wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // wxml中引入模板 <import src="/wxSearch/wxSearch.wxml"/> <template is="wxSearch" data="{{wxSearchData}}"/> // wxss中引入 @i

  • 微信小程序城市选择及搜索功能的方法

    实现搜索城市功能 参考 微信小程序 之『仿美团城市选择 城市切换』 https://github.com/cinoliu/-selectCity js文件 // pages/address/address.js var app = getApp() Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, cityList: [], isShowLetter: false, scrollTop: 0,//置顶高度 sc

  • 微信小程序下拉框搜索功能的实现方法

    最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个. 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择. 代码部分,我定义了五个参数,和一个自定义的方法, list:下拉框数组, _width:组件宽度, _height:组件高度, bind:action: 自定义方法 考虑到每个人用的时候用的对象数组结构不同我预留了两个字段,做自定义(可不写),怎么样是不是很强大. actualvalue:下拉框实际值, showvalue:下拉框显示值

  • 微信小程序云开发实现搜索功能

    微信小程序云开发实现搜索功能,供大家参考,具体内容如下 微信小程序使用云开发实现搜索功能有两种情况,一种是简单的搜索用关键字来查询数据,另一种是模糊查询关于关键字的全部数据查询.废话不用多说直接上代码部分. 简单搜索功能实现 WXML代码段 <view class="sousuokuang">     <view class="sousuo">         <view class="shurukuang">

  • 微信小程序实现锚点定位功能的方法实例

    前言 在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好的效果,我们看下项目中实现的效果: 功能实现 采用小程序视图容器组件实现:scroll-view 这里需要注意的是,竖向滚动时,scroll-view需要指定一个固定高度,我们看下WXML代码: <scroll-view style="height:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}"

  • 微信小程序 (地址选择1)--选取搜索地点并显示效果

    效果:(直接复制代码,可查看效果) 可以通过拖动地图,搜索地址,选择地址,并将地址值传给文本框 进入以下界面 点击确定后. 代码如下: wxml: <view class="box2"> <view class="box2_left">收货地址</view> <input type="text" class="box2_right" placeholder="请选择收货地址&

  • 微信小程序实现弹出菜单功能

    需求 点击标签栏按钮,向下弹出菜单,再次点击,收回菜单 要解决的问题 标签栏三栏样式,标签栏固定不动: 点击标签栏弹出菜单,并且出现透明遮罩: 遮罩优先级在弹出框之下: 弹出框内标签的设置: 滚动栏滚动条的隐藏 如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index: 弹性布局flex 横向排列 超出后wrap 然后space-around控制间距 ::-webkit-scrollbar { width: 0;

  • 微信小程序实现多选框功能的实例代码

    我们先来看看效果: 两种状态: 选中/不选中 wxml <!-- 选择 S --> <view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}"

  • 微信小程序tab左右滑动切换功能的实现代码

    效果图: 一.简介 自己的小程序需要实现这样的功能 1.核心思想 swiper 和scroll-view共用两个变量currentTab  navScrollLeft,当点击nav或者滑动swiper时设置两个变量的值为当前的index 二.实现 tab导航栏使用<scroll-view>标签,内容使用<swiper> 1.wxml实现 <view class="container"> <!-- tab导航栏 --> <!-- sc

  • 微信小程序中实现车牌输入功能

    目录 前言 背景 大猜想 找规律 结构和样式 组件实现 参数 键盘类型的判断 获取输入内容 组件传参 组件使用 测试 解决键盘类型判断的bug 结束语 组件的代码 使用页面代码 前言 哈哈哈,上新文章啦.好久没有更新啦,今天乘着休息来总结下之前用的到自定义键盘来输入车辆号牌微信组件.下面是效果图,请欣赏: 背景 近期做了一个和车有关的项目,有车肯定就有车牌,我们都知道车牌是有一定规律的,如果简单的给个输入框的话......这里省略一万字哈,从小我的编程老师告诉我不要相信任何用户输入的东西.嗯嗯!

  • 微信小程序实现带刻度尺滑块功能

    摘要: 与自带的slider不同的是,它是通过手势滑动标尺得到取值,而不是通过滑动滑块本身. 效果图 场景 当一屏显示不下,例如年龄体重选择,金额选择等大区间需要的选择器,相比自带的picker要直观一些. 思路: 先画一个scrollView 2 装进canvas lineTo画刻度线段,lineTo+fill画出三角形游标,fillText描绘文本标签 通过bindscroll监听刻度尺触摸事件 渲染取值到页面 基本布局 <scroll-view scroll-x="true"

随机推荐