您现在的位置是:首页 > 微信小程序

李清波 2019-08-09 微信小程序 410

小程序实现城市搜索和城市选择功能

小程序实现城市搜索和城市选择功能,打开小程序时根据定位获取当前城市,点击城市地址可跳到选择城市页面进行选择,点击选择后可处理响应的数据后返回当前页面。


image.png


demo.wxml

<view class='wrapper'>
    <list-html data="{{city}}" binddetail="bindtap" my-city config="{{config}}"></list-html>
</view>


demo.js

// pages/demo/demo.js
let City = require('../../utils/allcity.js');

Page({

	data: {
		city: [],
		config: {
			horizontal: true, // 第一个选项是否横排显示(一般第一个数据选项为 热门城市,常用城市之类 ,开启看需求)
			animation: true, // 过渡动画是否开启
			search: true, // 是否开启搜索
			searchHeight: 45, // 搜索条高度
			suctionTop: true // 是否开启标题吸顶
		}
	},
	onLoad() {
		// wx.showLoading({
		//   title: '加载数据中...',
		// })
		// // 模拟服务器请求异步加载数据
		// setTimeout(()=>{
		this.setData({
			city: City
		})
		//   wx.hideLoading()
		// },2000)

	},
	bindtap(e) {
		console.log(e.detail)
	},

})


demo.wxss

/* pages/dome/dome.wxss */

.wrapper {
  height: 100vh;
}
/* 关闭滚动条  */
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

.list-search {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 90rpx;
  padding: 10rpx 30rpx;
  box-sizing: border-box;
  z-index: 20;
  background: #FFF;
}

.search-title {
  flex-shrink: 0;
  font-size: 28rpx;
  padding-right: 10rpx;
}

.list-search-box {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  width: 100%;
  height: 70rpx;
  background: #f5f5f5;
  border-radius: 90rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.list-search-box input {
  width: 100%;
  padding-left: 10rpx;
}

.search-button {
  /* width: 100rpx; */
  flex-shrink: 0;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  margin-left: 10rpx;
}


allcity.js

//下面的下载地址有源码


码云下载地址:https://gitee.com/liqingbo/selectCity.git

评论