problem description
1. When implementing the goods component with ele.me, there is no way to scroll, because I am watching the video of ele.me 1.0 imitating vue.js, but I have updated it according to the code of 2.0. there is still an error. The console does not include anything, and some of the output is normal, but there is no way to scroll.
the environmental background of the problems and what methods you have tried
this is the effect of my console. You can see that everything can be printed normally without any problems.
Screenshot 2018-07-10 2.30.51 PM
has been modified to vue.js2.0 code, including ref= "foodsWrapper", this.$refs.menuWrapper, and finished getting ul height is, is in the nextTick method, still without any response
related codes
/ / Please paste the code text below (do not replace the code with pictures)
< template >
< div class= "goods" >
<div class="menu-wrapper" ref="menuWrapper">
<ul>
<li v-for="item in goods" class="menu-item">
<span class="text border-1px">
<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
{{item.name}}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper" ref="foodsWrapper">
<ul>
<li v-for="item in goods" class="food-list food-list-hook">
<h1 class="title">{{item.name}}</h1>
<ul>
<li v-for="food in item.foods" class="food-item border-1px">
<div class="icon" width="57" height="57">
<img :src="food.icon">
</div>
<div class="content">
<h2 class="name">{{food.name}}</h2>
<p class="desc">{{food.description}}
<div class="extra">
<span class="count">{{food.sellCount}} </span><span>{{food.rating}}%</span>
</div>
<div class="price">
<span class="now">${{food.price}}</span><span class="old" v-show="food.oldPrice">${{food.oldPrice}}</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div> < / div >
< / template >
< script type= "text/ecmascript-6" >
import BScroll from "better-scroll"
const ERR_OK=0;
export default {
props:{
seller:{
type:Object
}
},
data(){
return {
goods:[],
/*listHeight:[]*/
}
},
created(){
this.classMap=["decrease","discount","guarantee","invoice","special"],
this.$http.get("/api/goods").then((response)=>{
response=response.body;
console.log("1",response);
if(response.errno===ERR_OK){
this.goods=response.data;
console.log("2",this.goods);
console.log("3",this.$nextTick);
this.$nextTick(() => {
this._initScroll();
});
}
})
},
methods:{
_initScroll(){
this.menuScroll=new BScroll(this.$refs.menuWrapper,{});
this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{});
console.log("4",this.menuScroll);
console.log("5",this.foodsScroll);
}
}}; / then import it in main.js /
< / script >
what result do you expect? What is the error message actually seen?
The expected result ofis that the page scrolls up, but in fact, there is no response or error.