欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

解决vue的顶部滑动导航组件的一些问题

程序员文章站 2024-02-04 20:09:58
...

一.由于默认此组件全屏显示,所以需要取消全屏显示

解决办法: 去掉id为slider元素的一个类名:mui-fullscreen 即可

二.因为这个组件是js组件,自带滑动行为,所以要引入js文件,并初始化scroll控件

解决办法:
1.先导入mui的js文件
2.在它所在的组件被挂载(mounted钩子函数)时将这个完成这个组件的初始化:

mounted() {
		  // 当 组件中的DOM结构被渲染好并放到页面中后,会执行这个 钩子函数
		  // 如果要操作元素了,最好在 mounted 里面,因为,这里时候的 DOM 元素 是最新的
		  // 2. 初始化滑动控件
		  mui(".mui-scroll-wrapper").scroll({
			deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
		  });
		}

三.若初始化后会出现一个错误以下问题:

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode

这是因为webpack打包的bundle.js中默认是启用了严格模式,严格模式下不可以随意使用arguments , callee , caller ,而mui这个组件总用到了以上三个参数
解决办法:
1.安装插件 yarn add babel-plugin-transform-remove-strict-mode –D
2. 在.babelrc中添加如下代码:

{
  "presets": ["env", "stage-0"],
  "plugins": [
    "transform-runtime", 
    ["component", 
      [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]
    ], 
    "transform-remove-strict-mode"
  ] 
}

四.在滑动时一直出现警告
解决办法:将touch-active属性的值定义为pan-y:

<style lang="scss" scoped>
	* {
	  touch-action: pan-y;
	}
</style>

五.还是滑动不了,也没有报错,试着参考如下代码修改

<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll" >
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
							西餐牛排
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							日式料理
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							川菜系列
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							粤菜系列
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							徽菜专栏
						</a>
					</div>
				</div>
			</div>
相关标签: 解决问题