您現在的位置是:首頁 > 微信小程序

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

小程序實現城市搜索和城市選擇功能

小程序實現城市搜索和城市選擇功能,打開小程序時根據定位獲取當前城市,點擊城市地址可跳到選擇城市頁面進行選擇,點擊選擇后可處理響應的數據后返回當前頁面。


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

評論