uniapp城市列表_uni-app: 根据定位获取天气(附城市控件)
通過本章節(jié)你能學(xué)到那些？
1、Uni-App 測試數(shù)據(jù)封裝
2、Uni-App 城市控件(Uni-App元素操作相關(guān))
3、ES6 多種遍歷方式區(qū)別
下面我們來具體看看：
Uni-App 測試數(shù)據(jù)封裝
城市控件，我們就查詢接口了，根據(jù)高德提供的城市數(shù)據(jù)，我們進(jìn)行處理后，放到一個(gè)文件中。
// Json.js
const cityList = [{
"firstLetter":"A",
"cityList":[{
"cityID":"513209",
"city":"阿壩縣",
"abbr":"阿壩縣",
"firstSpell":"abx",
"spell":"abaxian",
"latitude":32.908167,
"longitude":101.712951,
"isSecond":1
}, {
...
}]
}, {
"firstLetter":"B",
"cityList":[{
"cityID":"110000",
"city":"北京市",
"abbr":"北京",
"firstSpell":"bjs",
"spell":"beijingshi",
"latitude":39.929986,
"longitude":116.395645,
"code":"010",
"sort":1,
"isSecond":0
}, {
...
}]
})
export default {
cityList
}
然后我們在main.js里面引入，使其可以共用。
// main.js
...
import Json from './Json'
const json = type=>{
// 模擬異步請求數(shù)據(jù)
return new Promise(resolve=>{
setTimeout(()=>{
resolve(Json[type]);
}, 500)
})
}
Vue.prototype.$api = {json};
下面，我們就可以在任意vue頁面使用this.$api.json(‘xxxx’)，來獲取Json.js里面暴露的對象了。
this.cityList = await this.$api.json('cityList');
下面我們對cityList的數(shù)據(jù)進(jìn)行渲染
Uni-App 城市控件
1、選擇pages目錄，右擊新建頁面，記得勾選自動在pages.json中注冊，否則需要手動去配置它。
新建完成后，pages.json會多一段配置
{
"path" : "pages/city/city",
"style" : {
// 手動配置title
"navigationBarTitleText": "城市選擇"
}
}
同時(shí)，pages目錄下會多一個(gè)目錄city，我們的城市選擇頁面就寫到city/city.vue頁面。
2、獲取城市數(shù)據(jù)
// city/city.vue
data() {
return {
cityList: []
};
},
async onLoad() {
this.cityList = await this.$api.json('city');
console.log(this.cityList);
},
打印數(shù)據(jù)如下圖：
3、html結(jié)構(gòu)
// 對應(yīng)樣式
.filter{
position: fixed;
top: 80upx;
font-size: 24upx;
right: 0;
line-height: 40upx;
text-align: right;
z-index: 10;
.li{
padding-left: 20upx;
padding-right: 20px;
}
}
.city-list{
.letter{
padding: 10upx 20upx;
background: #DCDFE660;
display: block;
}
.city{
padding: 0upx 20upx;
line-height: 64upx;
border-bottom: 1upx solid #F8F6FC;
font-size: 30upx;
&:last-child{
border-bottom: none;
}
}
}
H5預(yù)覽圖：
4、事件處理
(1)選擇城市列表事件
choose (item) {
// 選擇城市后，將城市名字，adcode，經(jīng)緯度緩存給vuex
this.$store.commit('setCity', {
city: item.city,
adcode: item.cityID,
latitude: item.latitude,
longitude: item.longitude
})
// 然后根據(jù)經(jīng)緯度查詢具體位置
this.$store.dispatch('getLocation', {
location: `${item.longitude},${item.latitude}`
})
// 最后返回首頁
uni.navigateBack({
delta: 1
});
}
下面看store.js實(shí)現(xiàn)
// store/index.js
mutations: {
...
setCity(state, data){
state.location = {
address: data
};
},
setLocation(state, data){
data = data.regeocode.addressComponent;
state.location = {
address: {
adcode: data.adcode,
city: data.city.length && data.city || data.province,
district: data.district
}
};
}
},
actions: {
getWeather({ commit }, params){
...
},
getLocation({ commit, dispatch}, params){
// 高德逆地址解析，根據(jù)經(jīng)緯度獲取具體位置
http({
methods: 'get',
url: 'https://restapi.amap.com/v3/geocode/regeo',
data: {
key: 'd9xxx7d4xx7bx91xx61cxx5',
location: params.location,
output: 'json'
}
}).then((data) =>{
commit('setLocation', data)
dispatch('getWeather', {
city: data.regeocode.addressComponent.adcode
})
}, (err) => {
console.log(err)
})
}
}
逆地址解析數(shù)據(jù)結(jié)構(gòu)如下：
這里逆地址解析后，又查詢了一次天氣，就可以更新到首頁天氣數(shù)據(jù)了，我們選擇城市后，是直接返回的，所以這里查詢一次天氣，首頁就不需要處理了。
(2)城市篩選事件
第一次，我們的解決方案是這樣：
filter (name, index) {
let scrollTop = this.$refs.letter[index].$el.offsetTop;
uni.showToast({
title: name,
icon: 'none',
duration: 500
});
uni.pageScrollTo({
scrollTop: scrollTop,
duration: 500
});
}
通過ref找到對應(yīng)的A-Z，得出他們距離頂部的距離offsetTop，然后滾動(uni.pageScrollTo)到對應(yīng)位置，H5預(yù)覽效果：
然而，小程序/APP報(bào)錯：
這里的this.$refs是空的，小程序壓根就不能這樣操作元素。好吧，只能換方式了。
第二次解決方案：
filter (name, index) {
uni.createSelectorQuery().select('.city-list').boundingClientRect(data=>{
uni.createSelectorQuery().select('#letter' + name + '').boundingClientRect((res)=>{
uni.showToast({
title: name,
icon: 'none',
duration: 500
});
uni.pageScrollTo({
duration: 200,
scrollTop:res.top - data.top
})
}).exec()
}).exec();
}
這里為什么要嵌套2層，這是因?yàn)闈L動到實(shí)際距離是元素距離頂部的距離減去最外層盒子的滾動距離
小程序預(yù)覽圖：
IOS真機(jī)預(yù)覽圖：
Uni-App API解析：
uni.createSelectorQuery()：返回一個(gè) SelectorQuery 對象實(shí)例?？梢栽谶@個(gè)實(shí)例上使用 select 等方法選擇節(jié)點(diǎn)，并使用 boundingClientRect 等方法選擇需要查詢的信息，必須在生命周期 mounted 后進(jìn)行調(diào)用。
SelectorQuery提供以下方法：
(1)、selectorQuery.in(component)：將選擇器的選取范圍更改為自定義組件 component 內(nèi)，返回一個(gè) SelectorQuery 對象實(shí)例。(初始時(shí)，選擇器僅選取頁面范圍的節(jié)點(diǎn)，不會選取任何自定義組件中的節(jié)點(diǎn))。
(2)、selectorQuery.select(selector)：在當(dāng)前頁面下選擇第一個(gè)匹配選擇器 selector 的節(jié)點(diǎn)，返回一個(gè) NodesRef(用于獲取節(jié)點(diǎn)信息的對象) 對象實(shí)例，可以用于獲取節(jié)點(diǎn)信息。
注意：selector 類似于 CSS 的選擇器，但僅支持下列語法。
ID選擇器：#the-id
class選擇器(可以連續(xù)指定多個(gè))：.a-class.another-class
子元素選擇器：.the-parent > .the-child
后代選擇器：.the-ancestor .the-descendant
跨自定義組件的后代選擇器：.the-ancestor >>> .the-descendant
多選擇器的并集：#a-node, .some-other-nodes
const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("節(jié)點(diǎn)離頁面頂部的距離為" + data.top);
}).exec();
(3)、selectorQuery.selectAll(selector)：在當(dāng)前頁面下選擇匹配選擇器 selector 的所有節(jié)點(diǎn)，返回一個(gè) NodesRef(用于獲取節(jié)點(diǎn)信息的對象) 對象實(shí)例，可以用于獲取節(jié)點(diǎn)信息
(4)、selectorQuery.selectViewport()：選擇顯示區(qū)域，可用于獲取顯示區(qū)域的尺寸、滾動位置等信息，返回一個(gè) NodesRef 對象實(shí)例。
(5)、selectorQuery.exec(callback)：執(zhí)行所有的請求。請求結(jié)果按請求次序構(gòu)成數(shù)組，在callback的第一個(gè)參數(shù)中返回。
下面我們來加強(qiáng)城市控件功能，添加搜索
...
{{city.city}}
我們用計(jì)算屬性對原有的城市數(shù)據(jù)處理
data() {
return {
keyword: '',
cityList: []
};
},
computed:{
// 將所有城市數(shù)據(jù)整理到citys里面
citys() {
let list = [];
this.cityList.map(item=>{
list.push(...item.cityList)
})
console.log(list);
return list;
},
// 搜索結(jié)果展示數(shù)據(jù)
showCityList(){
return this.citys.filter(item => {
let name = item.city + item.spell;
return name.indexOf(this.keyword) > -1;
})
}
}
citys數(shù)據(jù)結(jié)構(gòu)：
預(yù)覽效果圖：
這里用到了數(shù)據(jù)的2個(gè)方法，filter和map，我們來溫故一下數(shù)組的幾種遍歷方式，和他們各有什么區(qū)別。
1、forEach() 迭代數(shù)組每一項(xiàng)，沒有返回值
2、every() 迭代數(shù)組每一項(xiàng)，每項(xiàng)都符合條件的才返回true，反之false
3、some() 迭代數(shù)組每一項(xiàng)，只要有一項(xiàng)符合條件就返回true，如果全部不符合才返回false
4、map() 迭代數(shù)組每一項(xiàng)，可以給特定條件會返回重新組成新的數(shù)組
5、filter() 迭代數(shù)組每一項(xiàng)，可以給特定的條件進(jìn)行篩選返回新的數(shù)組
總結(jié)
今天你學(xué)到了什么？今天的核心內(nèi)容：
1、數(shù)據(jù)的處理(數(shù)組操作)
2、uni-app元素操作，篩選滾動
下一章節(jié)，天氣數(shù)據(jù)處理(圖標(biāo)、多場景等)
最后，謝謝大家支持。
喜歡的可以關(guān)注我哦!
總結(jié)
以上是生活随笔為你收集整理的uniapp城市列表_uni-app: 根据定位获取天气(附城市控件)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS 图片简易压缩
- 下一篇： Juniper防火墙之图解用户认证