uni-app城市展示组件代码
时间: 2023-12-07 08:02:48 浏览: 62
以下是一个简单的 uni-app 城市展示组件代码示例:
```html
<template>
<view class="city-list">
<view class="city-group" v-for="(group, index) in cityList" :key="index">
<view class="group-title">{{ group.title }}</view>
<view class="group-content">
<view class="city-item" v-for="(city, index) in group.cities" :key="index" @click="selectCity(city)">
{{ city }}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
cityList: {
type: Array,
required: true
}
},
methods: {
selectCity(city) {
this.$emit('select', city)
}
}
}
</script>
<style scoped>
.city-list {
padding: 0 20rpx;
}
.city-group {
margin-top: 20rpx;
}
.group-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.city-item {
display: inline-block;
width: 120rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border: 1rpx solid #ccc;
border-radius: 20rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
font-size: 28rpx;
}
</style>
```
在父组件中,你可以通过传递一个城市列表数组给子组件来使用这个组件:
```html
<template>
<view>
<city-list :city-list="cityList" @select="onSelectCity"></city-list>
</view>
</template>
<script>
import CityList from '@/components/CityList.vue'
export default {
components: {
CityList
},
data() {
return {
cityList: [
{ title: 'A', cities: ['北京', '上海', '广州', '深圳'] },
{ title: 'B', cities: ['保定', '包头', '巴彦淖尔', '宝鸡'] },
{ title: 'C', cities: ['成都', '重庆', '长沙', '长春'] },
{ title: 'D', cities: ['大连', '东莞', '大庆', '丹东'] },
{ title: 'E', cities: ['鄂尔多斯', '鄂州'] },
// ...
]
}
},
methods: {
onSelectCity(city) {
console.log(`选择了城市:${city}`)
}
}
}
</script>
```
这个组件将会渲染一个城市列表,每个城市有一个点击事件,当用户点击了某个城市时,它将会触发一个 `select` 事件,并将所选的城市作为参数传递回父组件。