pc端页面右侧滑动样式修改

	/* 设置滚动条的样式 */
		::-webkit-scrollbar {
		    width: 6px;
		}
		/* 滚动槽 */
		::-webkit-scrollbar-track {
		    -webkit-box-shadow: inset 0 0 6px rgba(40,77,126,0.3);
		    border-radius: 6px;
		}
		/* 滚动条滑块 */
		::-webkit-scrollbar-thumb {
		    border-radius: 6px;
		    background: #bbb;
		    -webkit-box-shadow: inset 0 0 6px rgba(40,77,126,0.5);
		}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你希望在PC端也能实现左右滑动切换页面效果,可以使用vue-touch和vue-scrollbar这两个插件结合实现。首先你需要安装这两个插件: ``` npm install vue-touch vue-scrollbar --save ``` 然后在组件中引入这两个插件,并注册一个touch对象: ```javascript import Vue from 'vue' import VueTouch from 'vue-touch' import VueScrollbar from 'vue-scrollbar' Vue.use(VueTouch) export default { data() { return { current: 0, // 当前页码 startX: 0, // 开始滑动的位置 endX: 0, // 结束滑动的位置 distance: 0, // 滑动的距离 pages: [ // 页面列表 { title: 'Page 1' }, { title: 'Page 2' }, { title: 'Page 3' }, { title: 'Page 4' }, { title: 'Page 5' } ] } }, mounted() { this.$touch.on('swipeleft', this.swipeLeft) this.$touch.on('swiperight', this.swipeRight) }, beforeDestroy() { this.$touch.off('swipeleft', this.swipeLeft) this.$touch.off('swiperight', this.swipeRight) }, methods: { swipeLeft(e) { if (this.current < this.pages.length - 1) { this.current++ } }, swipeRight(e) { if (this.current > 0) { this.current-- } }, touchStart(e) { this.startX = e.changedTouches[0].pageX }, touchEnd(e) { this.endX = e.changedTouches[0].pageX this.distance = this.endX - this.startX if (this.distance < -30 && this.current < this.pages.length - 1) { this.current++ } else if (this.distance > 30 && this.current > 0) { this.current-- } } }, components: { VueScrollbar } } ``` 在mounted和beforeDestroy钩子函数中注册和取消touch对象,然后实现swipeLeft和swipeRight方法来处理左右滑动事件,touchStart和touchEnd方法来处理手动滑动事件。这里还引入了vue-scrollbar插件,它可以实现滚动条的效果。在模板中,你可以使用v-for指令来循环渲染页面,然后使用v-if指令来控制显示当前页面,并在vue-scrollbar组件上绑定相应的事件: ```html <template> <div class="container" @touchstart="touchStart" @touchend="touchEnd"> <vue-scrollbar class="scrollbar" @scroll-end="scrollEnd"> <div class="page" v-for="(page, index) in pages" :key="index" v-if="index === current"> <h1>{{ page.title }}</h1> </div> </vue-scrollbar> </div> </template> ``` 这里的container是页面容器,page是每个页面,scrollbar是滚动条,你可以根据需要来设置样式。注意,在vue-scrollbar组件上绑定了scroll-end事件,用来判断滚动条是否结束滚动,如果是则更新当前页码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值