|
|
@@ -20,8 +20,8 @@
|
|
|
<span @click=back></span>
|
|
|
</div>
|
|
|
<div class=container>
|
|
|
- <div class=items v-for='item in imgs'>
|
|
|
- <div class=title @click='btnShow(item.name)'>{{item.name}}</div>
|
|
|
+ <div class=items v-for='(item,index) in imgs' :key='index'>
|
|
|
+ <div class=title @click='btnShow(item.name,item.index)' ref='gift'>{{item.name}}</div>
|
|
|
<transition name=fade>
|
|
|
<div class=images v-if="item.name == nameShow">
|
|
|
<img v-for="images in item.urls" :src=images>
|
|
|
@@ -42,21 +42,25 @@
|
|
|
data: {
|
|
|
nameShow: "",
|
|
|
oldNameShow: "",
|
|
|
+ scroll:[],
|
|
|
imgs: {
|
|
|
chicken: {
|
|
|
name: "巾帼醇种土鸡",
|
|
|
+ index:0,
|
|
|
urls: {
|
|
|
0: "http://odulvej8l.bkt.clouddn.com/2018_7_25_01.jpg",
|
|
|
}
|
|
|
},
|
|
|
sterilization: {
|
|
|
name: "整房杀菌除螨",
|
|
|
+ index:1,
|
|
|
urls: {
|
|
|
0: "http://odulvej8l.bkt.clouddn.com/2018_7_25_02.jpg",
|
|
|
}
|
|
|
},
|
|
|
deep_cleaning: {
|
|
|
name: "母婴房深度清洁",
|
|
|
+ index:2,
|
|
|
urls: {
|
|
|
0: "http://odulvej8l.bkt.clouddn.com/2018_7_25_03.jpg",
|
|
|
}
|
|
|
@@ -67,7 +71,10 @@
|
|
|
// this.btnShow(this.imgs.chicken.name)
|
|
|
},
|
|
|
methods: {
|
|
|
- btnShow(_) {
|
|
|
+ btnShow(_,index) {
|
|
|
+ console.log(index)
|
|
|
+ // console.log(this.$refs.gift[index].offsetTop);
|
|
|
+ window.scrollTo(0, 58 * index);
|
|
|
this.nameShow = this.oldNameShow == _ ? "" : _, this.oldNameShow = this.oldNameShow == _ ? "" : _
|
|
|
},
|
|
|
back() {
|
