uniapp城市列表_uni-app: 根据定位获取天气(附城市控件)
通過本章節你能學到那些？
1、Uni-App 測試數據封裝
2、Uni-App 城市控件(Uni-App元素操作相關)
3、ES6 多種遍歷方式區別
下面我們來具體看看：
Uni-App 測試數據封裝
城市控件，我們就查詢接口了，根據高德提供的城市數據，我們進行處理后，放到一個文件中。
// 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=>{
// 模擬異步請求數據
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的數據進行渲染
Uni-App 城市控件
1、選擇pages目錄，右擊新建頁面，記得勾選自動在pages.json中注冊，否則需要手動去配置它。
新建完成后，pages.json會多一段配置
{
"path" : "pages/city/city",
"style" : {
// 手動配置title
"navigationBarTitleText": "城市選擇"
}
}
同時，pages目錄下會多一個目錄city，我們的城市選擇頁面就寫到city/city.vue頁面。
2、獲取城市數據
// city/city.vue
data() {
return {
cityList: []
};
},
async onLoad() {
this.cityList = await this.$api.json('city');
console.log(this.cityList);
},
打印數據如下圖：
3、html結構
// 對應樣式
.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預覽圖：
4、事件處理
(1)選擇城市列表事件
choose (item) {
// 選擇城市后，將城市名字，adcode，經緯度緩存給vuex
this.$store.commit('setCity', {
city: item.city,
adcode: item.cityID,
latitude: item.latitude,
longitude: item.longitude
})
// 然后根據經緯度查詢具體位置
this.$store.dispatch('getLocation', {
location: `${item.longitude},${item.latitude}`
})
// 最后返回首頁
uni.navigateBack({
delta: 1
});
}
下面看store.js實現
// 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){
// 高德逆地址解析，根據經緯度獲取具體位置
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)
})
}
}
逆地址解析數據結構如下：
這里逆地址解析后，又查詢了一次天氣，就可以更新到首頁天氣數據了，我們選擇城市后，是直接返回的，所以這里查詢一次天氣，首頁就不需要處理了。
(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找到對應的A-Z，得出他們距離頂部的距離offsetTop，然后滾動(uni.pageScrollTo)到對應位置，H5預覽效果：
然而，小程序/APP報錯：
這里的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層，這是因為滾動到實際距離是元素距離頂部的距離減去最外層盒子的滾動距離
小程序預覽圖：
IOS真機預覽圖：
Uni-App API解析：
uni.createSelectorQuery()：返回一個 SelectorQuery 對象實例。可以在這個實例上使用 select 等方法選擇節點，并使用 boundingClientRect 等方法選擇需要查詢的信息，必須在生命周期 mounted 后進行調用。
SelectorQuery提供以下方法：
(1)、selectorQuery.in(component)：將選擇器的選取范圍更改為自定義組件 component 內，返回一個 SelectorQuery 對象實例。(初始時，選擇器僅選取頁面范圍的節點，不會選取任何自定義組件中的節點)。
(2)、selectorQuery.select(selector)：在當前頁面下選擇第一個匹配選擇器 selector 的節點，返回一個 NodesRef(用于獲取節點信息的對象) 對象實例，可以用于獲取節點信息。
注意：selector 類似于 CSS 的選擇器，但僅支持下列語法。
ID選擇器：#the-id
class選擇器(可以連續指定多個)：.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("節點離頁面頂部的距離為" + data.top);
}).exec();
(3)、selectorQuery.selectAll(selector)：在當前頁面下選擇匹配選擇器 selector 的所有節點，返回一個 NodesRef(用于獲取節點信息的對象) 對象實例，可以用于獲取節點信息
(4)、selectorQuery.selectViewport()：選擇顯示區域，可用于獲取顯示區域的尺寸、滾動位置等信息，返回一個 NodesRef 對象實例。
(5)、selectorQuery.exec(callback)：執行所有的請求。請求結果按請求次序構成數組，在callback的第一個參數中返回。
下面我們來加強城市控件功能，添加搜索
...
{{city.city}}
我們用計算屬性對原有的城市數據處理
data() {
return {
keyword: '',
cityList: []
};
},
computed:{
// 將所有城市數據整理到citys里面
citys() {
let list = [];
this.cityList.map(item=>{
list.push(...item.cityList)
})
console.log(list);
return list;
},
// 搜索結果展示數據
showCityList(){
return this.citys.filter(item => {
let name = item.city + item.spell;
return name.indexOf(this.keyword) > -1;
})
}
}
citys數據結構：
預覽效果圖：
這里用到了數據的2個方法，filter和map，我們來溫故一下數組的幾種遍歷方式，和他們各有什么區別。
1、forEach() 迭代數組每一項，沒有返回值
2、every() 迭代數組每一項，每項都符合條件的才返回true，反之false
3、some() 迭代數組每一項，只要有一項符合條件就返回true，如果全部不符合才返回false
4、map() 迭代數組每一項，可以給特定條件會返回重新組成新的數組
5、filter() 迭代數組每一項，可以給特定的條件進行篩選返回新的數組
總結
今天你學到了什么？今天的核心內容：
1、數據的處理(數組操作)
2、uni-app元素操作，篩選滾動
下一章節，天氣數據處理(圖標、多場景等)
最后，謝謝大家支持。
喜歡的可以關注我哦!
總結
以上是生活随笔為你收集整理的uniapp城市列表_uni-app: 根据定位获取天气(附城市控件)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS 图片简易压缩
- 下一篇： Juniper防火墙之图解用户认证