写了一个简单的省市区地址选择器,有简单的动画,主要是通过transform:translateX()来实现平移
效果
代码
<div class="selectcity">
<div class="city">
<div @click="getcity(0)">
{{ cityArr[0] ? cityArr[0].name : '选择省' }}
</div>
<div @click="getcity(1)">
{{ cityArr[1] ? cityArr[1].name : '选择市' }}
</div>
<div @click="getcity(2)">
{{ cityArr[2] ? cityArr[2].name : '选择区' }}
</div>
</div>
<div class="swiper">
<div class="swiper-box" :style="{ ...domWidth }">
<div class="swiper-item">
<div
class="item"
v-for="(item, index) in province"
:key="item.code"
@click="choice(index, item)"
>
{{ item.name }}
</div>
</div>
<div class="swiper-item">
<div
class="item"
v-for="(item, index) in city"
:key="item.code"
@click="choice(index, item)"
>
{{ item.name }}
</div>
</div>
<div class="swiper-item">
<div
class="item"
v-for="(item, index) in area"
:key="item.code"
@click="choice(index, item)"
>
{{ item.name }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
citylist: [
{
code: 1,
name: '广东',
childlist: [
{
code: 1,
name: '广州',
childlist: [
{
code: 1,
name: '天河区',
},
{
code: 2,
name: '荔湾区',
},
],
},
{
code: 2,
name: '深圳',
childlist: [
{
code: 1,
name: '福田区',
},
{
code: 2,
name: '罗湖区',
},
],
},
],
},
{
code: 2,
name: '福建',
childlist: [
{
code: 1,
name: '福州',
childlist: [
{
code: 1,
name: '晋安区',
},
{
code: 2,
name: '仓山区',
},
],
},
{
code: 2,
name: '南平',
childlist: [
{
code: 1,
name: '湖山区',
},
{
code: 2,
name: '井水区',
},
],
},
],
},
{
code: 3,
name: '福建',
childlist: [
{
code: 1,
name: '福州',
childlist: [
{
code: 1,
name: '晋安区',
},
{
code: 2,
name: '仓山区',
},
],
},
{
code: 2,
name: '南平',
childlist: [
{
code: 1,
name: '湖山区',
},
{
code: 2,
name: '井水区',
},
],
},
],
},
{
code: 4,
name: '福建',
childlist: [
{
code: 1,
name: '福州',
childlist: [
{
code: 1,
name: '晋安区',
},
{
code: 2,
name: '仓山区',
},
],
},
{
code: 2,
name: '南平',
childlist: [
{
code: 1,
name: '湖山区',
},
{
code: 2,
name: '井水区',
},
],
},
],
},
{
code: 5,
name: '福建',
childlist: [
{
code: 1,
name: '福州',
childlist: [
{
code: 1,
name: '晋安区',
},
{
code: 2,
name: '仓山区',
},
],
},
{
code: 2,
name: '南平',
childlist: [
{
code: 1,
name: '湖山区',
},
{
code: 2,
name: '井水区',
},
],
},
],
},
{
code: 6,
name: '福建',
childlist: [
{
code: 1,
name: '福州',
childlist: [
{
code: 1,
name: '晋安区',
},
{
code: 2,
name: '仓山区',
},
],
},
{
code: 2,
name: '南平',
childlist: [
{
code: 1,
name: '湖山区',
},
{
code: 2,
name: '井水区',
},
],
},
],
},
],
style: 0,
index: [0, 0],
cityArr: [null, null, null],
}
},
computed: {
province() {
return this.citylist
},
city() {
return this.province[this.index[0]].childlist
},
area() {
return this.city[this.index[1]].childlist
},
domWidth() {
const arr = [0, '-100%', '-200%']
return {
transform: `translateX(${arr[this.style]})`,
}
},
},
methods: {
getcity(e) {
if (this.style > e || this.index[e]) {
this.style = e
this.cityArr.forEach((index) => {
if (index > this.style) {
this.cityArr[index] = null
this.index[index - 1] = 0
}
})
}
},
choice(e, v) {
console.log(this.style, this.index, this.cityArr)
this.$set(this.cityArr, this.style, {
...v,
})
if (this.style == 2) {
setTimeout(() => {
this.ok()
}, 0)
return
}
this.style = this.style != 2 ? ++this.style : 2
this.$set(this.index, this.style - 1, e)
},
ok() {
alert('完成')
},
},
}
</script>
<style>
.selectcity {
display: flex;
flex-direction: column;
}
.swiper {
overflow: hidden;
}
.swiper-box {
display: flex;
transform: translateX(0);
transition: 0.5s;
}
.swiper-item {
width: 100%;
overflow: hidden;
flex-shrink: 0;
}
.item {
padding: 30px;
border-bottom: 1px solid #ccc;
white-space: nowrap;
}
.city {
display: flex;
justify-content: space-between;
padding: 30px;
}
.city div:nth-child(1) {
width: 100%;
text-align: left;
}
.city div:nth-child(2) {
width: 100%;
text-align: center;
}
.city div:nth-child(3) {
width: 100%;
text-align: right;
}
</style>
结尾
用的是自定义的数据,你可以导入省市区json文件,
小白一个,干不动就回家喂猪