使用 better-scroll 页面不能点击

better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true,better-scroll 会派发一个 click 事件,我们会给派发的 event 参数加一个私有属性 _constructed,值为 true。

 

const options = {

click: true,

taps: true

}

this.scroll = new BScroll(this.$refs.wrapper,options)

官网 API  https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#click

在前端开发中,利用`better-scroll`库来实现菜单栏的联动通常是为了实现滚动监听和导航之间的交互。`better-scroll`是一个轻量级的移动端滚动库,它简化了复杂的滚动处理,非常适合做列表、滚动区域等效果。 要实现菜单栏随滚动页面联动的效果,可以按照以下步骤操作: 1. **安装依赖**:首先需要在项目中引入`better-scroll`库,如果你使用npm,可以在package.json文件中添加依赖项,然后运行`npm install better-scroll`。 2. **初始化 BetterScroll**:为菜单栏或导航栏的容器元素创建BetterScroll实例,例如: ```javascript import Bscroll from 'better-scroll'; const menuBscroll = new Bscroll('.menu-container', { scrollY: true, // 只允许水平滚动 }); ``` 3. **设置事件监听**:当 BetterScroll 实例发生滚动时,你可以监听 `onScroll` 或者 `scrollEnd` 事件,更新对应菜单的状态,比如高亮当前选项: ```javascript menuBscroll.on('scrollEnd', function(e) { const currentSection = e.y / this.height; // 计算当前滚动位置相对于总高度的比例 // 遍历菜单项,找到对应比例的高亮部分 document.querySelector(`.menu-item:nth-child(${Math.floor(currentSection * this.maxScroll Y)})`).classList.add('active'); }); ``` 4. **切换内容**:当用户点击菜单项时,可以根据选中的索引来切换内容区域的内容: ```javascript menuBscroll.on('click', '.menu-item', function(e) { const targetIndex = Array.from(menuBscroll.container.querySelectorAll('.menu-item')).indexOf(this); // 动态切换内容区域显示相应的内容... }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值