美文网首页
微信小程-实现城市列表选择

微信小程-实现城市列表选择

作者: Zero_fc55 | 来源:发表于2020-07-17 12:42 被阅读0次

    实现效果预览

    1、定位当前城市

    2、根据首字母定位到响应的区域

    3、点击选中区域

    目录结构

    index.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:#F9C400;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="background-color: #fff;height:{{winHeight}}px" bindscroll="bindScroll"

    scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}">

      <view class="hotcity-common thisCity">当前选择城市</view>

      <view class="thisCityName">{{city}}</view>

      <view>

        <text class="hotcity hotcity-common">热门城市</text>

        <view class="weui-grids">

          <block wx:for-items="{{hotcityList}}" wx:key='item'>

            <view class="weui-grid" data-cityCode="{{item.cityCode}}" data-city="{{item.city}}" bindtap="bindHotCity" >

              <view class="weui-grid__label">{{item.city}}</view>

            </view>

          </block>

        </view>

      </view>

      <view class="selection" wx:for="{{cityList}}" wx:key="{{item.initial}}">

        <view class="item_letter"  id="{{item.initial}}">

        <image src="/images/shopbgimg.png"></image>

        <text>  {{item.initial}}</text>

        </view>

        <view class="item_city"  wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="{{ct.id}}" data-cityCode="{{ct.code}}" data-city="{{ct.city}}" bindtap="bindCity">

          {{ct.city}}

        </view>

      </view>

    </scroll-view>

    ```

    index.js 页面

    ```var city = require('../../utils/city.js');

    var app = getApp()

    Page({

      data: {

        searchLetter: [],

        showLetter: "",

        winHeight: 0,

        // tHeight: 0,

        // bHeight: 0,

        cityList: [],

        isShowLetter: false,

        scrollTop: 0,//置顶高度

        scrollTopId: '',//置顶id

        city: "",

        hotcityList: [{ cityCode: 110000, city: '北京市' }, { cityCode: 310000, city: '上海市' }, { cityCode: 440100, city: '广州市' }, { cityCode: 440300, city: '深圳市' }, { cityCode: 330100, city: '杭州市' }, { cityCode: 320100, city: '南京市' }, { cityCode: 420100, city: '武汉市' }, { cityCode: 410100, city: '郑州市' }, { cityCode: 120000, city: '天津市' }, { cityCode: 610100, city: '西安市' }, { cityCode: 510100, city: '成都市' }, { cityCode: 500000, city: '重庆市' }],

        latitude: '',

        longitude: ''

      },

      onLoad: function (e) {

        // 生命周期函数--监听页面加载

        var searchLetter = city.searchLetter;

        var cityList = city.cityList();

        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)

        }

        this.setData({

          winHeight: winHeight,

          itemH: itemH,

          searchLetter: tempObj,

          cityList: cityList,

          city: e.city

        })

      },

      onReady: function () {

        // 生命周期函数--监听页面初次渲染完成

      },

      onShow: function () {

        // 生命周期函数--监听页面显示

        this.getLocation()

      },

      clickLetter: function (e) {

        var showLetter = e.currentTarget.dataset.letter;

        this.setData({

          showLetter: showLetter,

          isShowLetter: true,

          scrollTopId: showLetter,

        })

        var that = this;

        setTimeout(function () {

          that.setData({

            isShowLetter: false

          })

        }, 1000)

      },

      // 微信获得经纬度

      getLocation: function () {

        let vm = this;

        var latitude = ''

        var longitude = ''

        wx.getLocation({

          type: 'wgs84',

          success: function (res) {

            latitude = res.latitude

            longitude = res.longitude

            var speed = res.speed

            var accuracy = res.accuracy;

            vm.setData({

              latitude: res.latitude,

              longitude: res.longitude

            })

          },

          fail: function (res) {

          }

        })

        //

      },

      //选择城市

      bindCity: function (e) {

        this.setData({

          city: e.currentTarget.dataset.city,

        })

      },

      //选择热门城市

      bindHotCity: function (e) {

        this.setData({

          city: e.currentTarget.dataset.city

        })

      },

      //点击热门城市回到顶部

      hotCity: function () {

        this.setData({

          scrollTop: 0,

        })

      }

    })

    ```

    index.wxss 页面

    ```.searchLetter {

      position: fixed;

      right: 0;

      width: 50rpx;

      text-align: center;

      justify-content: center;

      display: flex;

      flex-direction: column;

      color: #666;

      z-index: 1;

      padding-right: 30rpx;

      padding-left: 13rpx;

    }

    .searchLetter view {

      margin-top: 20rpx;

    }

    .touchClass {

      background-color: #fff;

      color: #fff;

      padding-top: 46rpx;

    }

    .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;

      height: 67rpx;

      line-height: 67rpx;

      padding-left: 69rpx;

      align-items: center;

      font-size: 20rpx;

      color: #333;

      position: relative

    }

    .item_letter image {

      height: 67rpx;

      width: 100%;

      position: absolute;

      top: 0;

      left: 0;

    }

    .item_letter text{

      position: absolute;

      top: 0;

      left: 69rpx;

    }

    .item_city {

      display: flex;

      background-color: #fff;

      height: 83rpx;

    margin-left: 43rpx;

      align-items: center;

      border-bottom: 1rpx solid #EDEDED;

      font-size: 22rpx;

      color: #666;

    }

    .hotcity-common {

      font-size: 20rpx;

      color: #666;

      padding: 0 0 0 40rpx;

    }

    .thisCity {

      padding-top: 30rpx;

    }

    .thisCityName {

      display: inline-block;

      border: 1rpx solid #F9C400;

      padding: 10rpx;

      font-size: 20rpx;

      color: #F9C400;

      text-align: center;

      min-width: 92rpx;

      margin: 28rpx 0 25rpx 49rpx;

      border-radius:6rpx;

    }

    .thishotText {

      color: #F9C400;

      font-size: 20rpx;

      margin: 0 !important;

    }

    .slectCity {

      border-color:#F9C400 !important;

    }

    .slectCity view {

      color: #F9C400 !important;

    }

    .weui-grids{

      margin-left: 49rpx;

      overflow: hidden;

      padding-bottom: 18rpx;

    }

    .weui-grid {

      position: relative;

      float: left;

      width: 124rpx;

      box-sizing: border-box;

      border-radius: 6rpx;

      margin: 18rpx 29rpx 26rpx 0;

      height: 46rpx;

      line-height: 46rpx;

      background: #F4F4F4;

      font-size: 22rpx;

      color: #666

    }

    .weui-grid__label {

      display: block;

      text-align: center;

      color: #333;

      font-size: 24rpx;

      white-space: nowrap;

      text-overflow: ellipsis;

      overflow: hidden;

    }

    ```

    city.js文件里面是省市  有需要私信!

    相关文章

      网友评论

          本文标题:微信小程-实现城市列表选择

          本文链接:https://www.haomeiwen.com/subject/qkubzhtx.html