<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. 微信小程序城市选择及搜索功能的方法

         更新时间:2019年03月22日 11:22:01   作者:嘉煠   我要评论

        这篇文章主要介绍了微信小程序城市选择及搜索功能的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

        实现搜索城市功能

        参考 微信小程序 之『仿美团城市选择 城市切换』
        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;
        }

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

        相关文章

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>