vue商品列表滚动效果_VUE - 商品列表滑动展示及底部滚动条同步效果 - 期权论坛...

限时抢购

限时抢购

限时抢购

限时抢购

限时抢购

限时抢购

限时抢购

限时抢购

限时抢购

限时抢购

限时抢购

限时抢购

export default {

name: "HotNav",

data () {

return {

// 1. 屏幕的宽度

screenW: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,

// 2. 滚动内容的宽度

scrollContentW: 720,

// 3. 滚动条背景的长度

bgBarW: 100,

// 4. 滚动条的长度

barXWidth: 0,

// 5. 起点

startX: 0,

// 6. 记录结束点

endFlag: 0,

// 7. 移动的距离

barMoveWidth: 0

}

},

// VUE计算属性

computed: {

innerBarStyle () {

return {

width: `${this.barXWidth}px`,

left:`${this.barMoveWidth}px`

}

}

},

mounted() {

this.getBottomBarWidth();

this.bindEvent();

},

methods:{

// 获取滚动条的长度

getBottomBarWidth(){

const {bgBarW, screenW, scrollContentW} = this;

this.barXWidth = bgBarW * (screenW / scrollContentW)

},

// 移动端事件监听

bindEvent(){

this.$el.addEventListener('touchstart',this.handleTouchStart,false);

this.$el.addEventListener('touchmove',this.handleTouchMove,false);

this.$el.addEventListener('touchend',this.handleTouchEnd,false);

},

// 开始触摸

handleTouchStart(event){

console.log(event.touches);

// 1. 获取第一个触点

let touch = event.touches[0];

// 2.求出起始点

this.startX = Number(touch.pageX);

// console.log(this.startX);

},

// 开始移动

handleTouchMove(){

// console.log('开始移动');

// 1. 获取第一个触点

let touch = event.touches[0];

// 2. 求出移动的距离

let moveWidth = Number(touch.pageX) - this.startX;

// console.log(moveWidth);

// 3. 求出滚动条走的距离

this.barMoveWidth = -((this.bgBarW / this.scrollContentW) * moveWidth - this.endFlag);

// 4. 边界值处理

if(this.barMoveWidth <= 0){ // 左边

this.barMoveWidth = 0;

}else if(this.barMoveWidth >= this.bgBarW - this.barXWidth){ // 右边

this.barMoveWidth = this.bgBarW - this.barXWidth;

}

},

// 结束触摸

handleTouchEnd(){

console.log('结束触摸');

this.endFlag = this.barMoveWidth;

},

}

}

[点击并拖拽以移动]

.hotnav{

width : 100% ;

height : 180px ;

position : relative ;

background-color :#fff;

padding-bottom : 5px ;

.nav-conter {

width: 100%;

overflow-x: scroll;

.conter-inner{

width : 720 px ;

height : 100% ;

display : flex ;

flex-wrap : wrap ; //允许换行

.inner-item {

width : 90 px ;

height : 90px ;

display : flex ;

flex-direction : column ;//垂直显示

justify-content :center; //位于容器中心

align-items : center ; //盒子元素在纵轴上居中放置

font-size : 14px ;

color: blue;

img {

width : 40% ;

margin-bottom : 5px ;

}

}

}

}

/*取消原有的滚动条样式*/

.nav-conter::-webkit-scrollbar {

display :none

}

/*自定义滚动条样式*/

.hot-nav-bottom {

width : 100px ;

height : 2px ;

background-color :palegreen;

position : absolute ;

left: 50% ;

margin-left : -50px ;

bottom : 8px ;

.hot-nav-bottom-inner {

position : absolute;

left : 0;

height : 100% ;

background-color : blue ;

width : 0px ;

}

}

}