vue 横向菜单滚动定位_使用vue组件+iscroll实现一个横向菜单，不能正确滑动
使用vue組件+iscroll實現(xiàn)一個橫向菜單，可是卻不能滑動，給父元素ul寫死一個寬度可以滑動。
但是，我在computed里計算寬度，直接路由進去不能滑動，當我進入別的組件(切換路由)回來又可以滑動了
示例地址：http://onepoint.stg4.v5time.net/news/1
- {{item.name}}
#wrapper{
position: absolute;
z-index: 1;
height: 40px;
left: 0;
width: 100%;
overflow: hidden;
}
#scroller{
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#scroller ul{
width: 100%;
height: 100%;
text-align: center;
}
#scroller li{
float:left;
height: 30px;
line-height: 30px;
width:1.6rem;
list-style-type: none;
}
#scroller .bot{
border-bottom:2px solid rgb(37, 190, 169);
}
import IScroll from 'iscroll/build/iscroll-lite.js'
export default{
props: {
menu: {
type: Array
},
selected: {
type: Boolean,
require: false,
default: false
}
},
data () {
return {
index: 0
}
},
computed: {
getWidth () {
return 'width:' + this.menu.length * 1.6 + 'rem'
}
},
ready () {
var myScroll = new IScroll(this.$els.wrapper, {scrollX: true, scrollY: false})
myScroll.say = ''
},
methods: {
checkIt (index, item) {
var lis = this.$els.ul.children
lis[this.index].classList.remove('bot')
this.index = index
lis[index].classList.add('bot')
this.$dispatch('click-msg', item)
}
}
}
總結(jié)
以上是生活随笔為你收集整理的vue 横向菜单滚动定位_使用vue组件+iscroll实现一个横向菜单，不能正确滑动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DoIP（一）——基础概念
- 下一篇： iframe vue 前进 后退_vue