DESKTOP-A1SENDA\HUzy
4 years ago
14 changed files with 319 additions and 4 deletions
Split View
Diff Options
-
2app.js
-
1app.json
-
14components/city-change/README.md
-
106components/city-change/index.js
-
3components/city-change/index.json
-
26components/city-change/index.wxml
-
73components/city-change/index.wxss
-
71pages/home/city-test/index.js
-
5pages/home/city-test/index.json
-
5pages/home/city-test/index.wxml
-
1pages/home/city-test/index.wxss
-
4pages/home/index/index.js
-
9pages/home/index/index.wxml
-
3pages/home/index/index.wxss
@ -0,0 +1,14 @@ |
|||
<city-change styles='max-height:100%;' bindcitytap='cityTap'></city-change> wxml页面引用 |
|||
注意： |
|||
1.需要引用组件的index.json中需要 |
|||
"usingComponents": { |
|||
"city-change":"/components/city-change/index" |
|||
} |
|||
|
|||
2.在index.js中可以添加以下方法以便于获取回调 |
|||
cityTap(e){ |
|||
console.log('fasdfsdfsdfds'); |
|||
console.log(e); |
|||
const cityName=e.detail.cityname; |
|||
wx.navigateBack(); |
|||
}, |
|||
@ -0,0 +1,106 @@ |
|||
// import qqmap from '../../utils/map.js'; //如果需要定位打开wxml和js中注释部分，替换此处map.js为实际引用
|
|||
const app = getApp() |
|||
Component({ |
|||
properties: { |
|||
styles:{//这个是可以自定义最外层的view的样式
|
|||
type:String, |
|||
value:'', |
|||
observer: function (newval, oldval) { |
|||
// 监听改变
|
|||
console.log(newval, oldval); |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
data: { |
|||
//下面是字母排序
|
|||
|
|||
letter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"], |
|||
cityListId: '', |
|||
//下面是城市列表信息，这里只是模拟数据
|
|||
citylist: [{ "letter": "A", "data": [{ "id": "v7", "cityName": "安徽" }] }, { "letter": "B", "data": [{ "id": "v10", "cityName": "巴中" }, { "id": "v4", "cityName": "包头" }, { "id": "v1", "cityName": "北京" }] }, { "letter": "C", "data": [{ "id": "v15", "cityName": "成都" }] }, { "letter": "D", "data": [{ "id": "v21", "cityName": "稻城" }] }, { "letter": "G", "data": [{ "id": "v17", "cityName": "广州" }, { "id": "v29", "cityName": "桂林" }] }, { "letter": "H", "data": [{ "id": "v9", "cityName": "海南" }, { "id": "v3", "cityName": "呼和浩特" }] }, { "letter": "L", "data": [{ "id": "v24", "cityName": "洛阳" }, { "id": "v20", "cityName": "拉萨" }, { "id": "v14", "cityName": "丽江" }] }, { "letter": "M", "data": [{ "id": "v13", "cityName": "眉山" }] }, { "letter": "N", "data": [{ "id": "v27", "cityName": "南京" }] }, { "letter": "S", "data": [{ "id": "v18", "cityName": "三亚" }, { "id": "v2", "cityName": "上海" }] }, { "letter": "T", "data": [{ "id": "v5", "cityName": "天津" }] }, { "letter": "W", "data": [{ "id": "v12", "cityName": "乌鲁木齐" }, { "id": "v25", "cityName": "武汉" }] }, { "letter": "X", "data": [{ "id": "v23", "cityName": "西安" }, { "id": "v28", "cityName": "香港" }, { "id": "v19", "cityName": "厦门" }] }, { "letter": "Z", "data": [{ "id": "v8", "cityName": "张家口" }] }], |
|||
//下面是热门城市数据，模拟数据
|
|||
newcity: ['北京', '上海', '广州', '深圳', '成都', '杭州'], |
|||
// citySel: '全国',
|
|||
locateCity: '', |
|||
height: app.globalData.safeFragmentHeight, |
|||
}, |
|||
methods: { |
|||
//点击城市
|
|||
cityTap(e) { |
|||
const val = e.currentTarget.dataset.val || '', |
|||
types = e.currentTarget.dataset.types || '', |
|||
Index = e.currentTarget.dataset.index || '', |
|||
that=this; |
|||
let city = this.data.citySel; |
|||
switch (types) { |
|||
case 'locate': |
|||
//定位内容
|
|||
city = this.data.locateCity; |
|||
break; |
|||
case 'national': |
|||
//全国
|
|||
city = '全国'; |
|||
break; |
|||
case 'new': |
|||
//热门城市
|
|||
city = val; |
|||
break; |
|||
case 'list': |
|||
//城市列表
|
|||
city = val.cityName; |
|||
break; |
|||
} |
|||
if(city){ |
|||
wx.setStorage({ |
|||
key: 'city', |
|||
data: city |
|||
}) //点击后给父组件可以通过bindcitytap事件，获取到cityname的值，这是子组件给父组件传值和触发事件的方法
|
|||
this.triggerEvent('citytap', { cityname: city }); |
|||
}else{ |
|||
console.log('还没有'); |
|||
this.getLocate(); |
|||
} |
|||
|
|||
}, |
|||
//点击城市字母
|
|||
letterTap(e) { |
|||
const Item = e.currentTarget.dataset.item; |
|||
this.setData({ |
|||
cityListId: Item |
|||
}); |
|||
console.log(this.data.cityListId); |
|||
}, |
|||
//调用定位
|
|||
// getLocate(){
|
|||
// let that=this;
|
|||
// new qqmap().getLocateInfo().then(function (val) {//这个方法在另一个文件里，下面有贴出代码
|
|||
// console.log(val);
|
|||
// if (val.indexOf('市') !== -1) {//这里是去掉“市”这个字
|
|||
// console.log(val.indexOf('市') - 1);
|
|||
// val = val.slice(0, val.indexOf('市'));
|
|||
// console.log(val);
|
|||
// }
|
|||
// that.setData({
|
|||
// locateCity: val
|
|||
// });
|
|||
// //把获取的定位和获取的时间放到本地存储
|
|||
// wx.setStorageSync('locatecity', { city: val, time: new Date().getTime() });
|
|||
// });
|
|||
// }
|
|||
}, |
|||
ready(){ |
|||
// console.log(getApp());
|
|||
// let that = this,
|
|||
// cityOrTime = wx.getStorageSync('locatecity')||{},
|
|||
// time = new Date().getTime(),
|
|||
// city='';
|
|||
// if (!cityOrTime.time||(time - cityOrTime.time > 1800000)){//每隔30分钟请求一次定位
|
|||
// this.getLocate();
|
|||
// }else{//如果未满30分钟，那么直接从本地缓存里取值
|
|||
// that.setData({
|
|||
// locateCity: cityOrTime.city
|
|||
// })
|
|||
// }
|
|||
} |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
<view class='city_box' style='{{styles}}'> |
|||
<view class='city_left'> |
|||
<scroll-view scroll-y style='width:100%;height:85vh;' scroll-with-animation scroll-into-view="{{cityListId}}"> |
|||
<!-- <view class='city_locate' data-types='locate' catchtap='cityTap'> |
|||
<text class='city_locate_title'>自动定位</text> |
|||
<text class='city_locate_text' style='{{!locateCity&&"color:#33b9ff;"}}'>{{locateCity||'点击定位'}}</text> |
|||
</view> --> |
|||
<view class='national' data-types='national' catchtap='cityTap'>全国</view> |
|||
<view class='new_city'> |
|||
<view class='new_city_title'>热门城市</view> |
|||
<view class='new_city_box'> |
|||
<text class='new_city_text' wx:for='{{newcity}}' wx:key='this' data-types='new' catchtap='cityTap' data-val='{{item}}'>{{item}}</text> |
|||
</view> |
|||
</view> |
|||
<view class='city_list_box'> |
|||
<block wx:for='{{citylist}}' wx:key='this' wx:for-item='letterItem' wx:for-index='letterIndex'> |
|||
<view class='city_first_letter' id='{{letterItem.letter}}'>{{letterItem.letter}}</view> |
|||
<text class='city_name' wx:for='{{letterItem.data}}' wx:key='this' data-types='list' catchtap='cityTap' data-index='{{index}}' data-val='{{item}}'>{{item.cityName}}</text> |
|||
</block> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view class='city_right'> |
|||
<text class='letter_item' wx:for='{{letter}}' wx:key='this' catchtap='letterTap' data-item='{{item}}'>{{item}}</text> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,73 @@ |
|||
.city_box{ |
|||
height:100%; |
|||
background: #fff; |
|||
display: flex; |
|||
} |
|||
.city_left{ |
|||
flex: 1; |
|||
} |
|||
.city_right{ |
|||
width: 60rpx; |
|||
margin-top: 20rpx; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
} |
|||
.letter_item{ |
|||
flex: 1; |
|||
height: 40rpx; |
|||
display: block; |
|||
font-size: 24rpx; |
|||
color: #33B9FF; |
|||
text-align: center; |
|||
} |
|||
.city_locate,.national{ |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
border-bottom: 1px solid #efefef; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
padding-left: 25rpx; |
|||
} |
|||
.city_locate_title{ |
|||
color: #999; |
|||
margin-right: 20rpx; |
|||
} |
|||
.new_city{ |
|||
background: #efefef; |
|||
font-size: 28rpx; |
|||
} |
|||
.new_city_title{ |
|||
line-height: 50rpx; |
|||
color: #999; |
|||
padding-left: 25rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.new_city_box{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
.new_city_text{ |
|||
width: 200rpx; |
|||
text-align: center; |
|||
line-height: 70rpx; |
|||
background: #fff; |
|||
border-radius: 35rpx; |
|||
margin:0 0 22rpx 22rpx; |
|||
} |
|||
.city_first_letter{ |
|||
line-height: 40rpx; |
|||
height: 40rpx; |
|||
padding-left: 25rpx; |
|||
font-size: 28rpx; |
|||
background: #eee; |
|||
color: #999; |
|||
} |
|||
.city_name{ |
|||
display: block; |
|||
line-height: 80rpx; |
|||
height: 80rpx; |
|||
border-bottom: 1px solid #efefef; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
padding-left: 25rpx; |
|||
} |
|||
@ -0,0 +1,71 @@ |
|||
// pages/home/city-test/index.js
|
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
|
|||
}, |
|||
cityTap(e){ |
|||
console.log('fasdfsdfsdfds'); |
|||
console.log(e); |
|||
const cityName=e.detail.cityname; |
|||
wx.navigateBack(); |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom: function () { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage: function () { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"city-change":"/components/city-change/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
<!--pages/home/city-test/index.wxml--> |
|||
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
|||
<view slot="content" class="text-black text-xl">城市选择</view> |
|||
</cu-custom> |
|||
<city-change styles='max-height:100%;' bindcitytap='cityTap'></city-change> |
|||
@ -0,0 +1 @@ |
|||
/* pages/home/city-test/index.wxss */ |
|||
Write
Preview
Loading…
Cancel
Save