mui 左右滑动效果

简介: mui 左右滑动效果

好记性不如烂笔头,与其每次都在网上找不如记自己博客。以前我觉得反正网上都有,一些细节性的东西不需要记,现在我发现不是这么回事,主要是现在网上东西太驳杂,有时候短时间很难找出自己想要的答案。


好了,简单说下mui如何设置滑动。


最近将要做一个手机端页面,显示一个1-12月份的数据图表,由于屏幕的关系横向显示不下,因此需要支持左右滑动,具体做法如下:


关键html+js代码:

  <div class="mui-content mui-scroll-wrapper"> 
                    <div id="container" style="min-width:400px;height:400px;width: 1000px;"></div>
                </div>


// scroll左右滚动
    mui(".mui-scroll-wrapper").scroll({
        // deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
        scrollY: false, //是否竖向滚动
        scrollX: true, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        // indicators: true, //是否显示滚动条
        deceleration: 0.0008, //阻尼系数,系数越小滑动越灵敏
        bounce: true //是否启用回弹
    });

效果图:


  

 


图表插件这里就不细说,页面布局啥的参照mui的标准来即可。


以上。

 

PS:楼主邮箱 tccwpl@163.com

目录
相关文章
|
7月前
|
移动开发 JavaScript 小程序
uView Popup 弹出层
uView Popup 弹出层
120 0
|
7月前
|
移动开发 JavaScript 小程序
uView Tabbar 底部导航栏
uView Tabbar 底部导航栏
197 0
|
6月前
|
JavaScript
JS移动端设置mouseover,mouseleave有效么
JS移动端设置mouseover,mouseleave有效么
89 1
|
7月前
|
JavaScript API
uView Drawer 抽屉
uView Drawer 抽屉
112 0
|
Android开发 UED
好看的Dialog加载动画
好看的Dialog加载动画
|
数据可视化
UGUI系列-Button绑定事件的多种实现
今天分享一下UGUI Button绑定事件的几种方法,以及优点和缺点 有哪些地方不懂的小伙伴也可以联系我的QQ,我的QQ就在博客链接中隐藏着,看能不能找到咯
|
前端开发 Windows
[UWP]使用Picker实现一个简单的ColorPicker弹窗
原文:[UWP]使用Picker实现一个简单的ColorPicker弹窗 在上一篇博文《[UWP]使用Popup构建UWP Picker》中我们简单讲述了一下使用Popup构建适用于MVVM框架下的弹窗层组件Picker的过程。
1142 0
|
C# 开发者
[UWP]新控件ColorPicker
原文:[UWP]新控件ColorPicker 1. 前言 Fall Creators Update中提供了一个新得ColorPicker控件,解决了以前选择颜色只能用Combo Box的窘境。 2. 一个简单的例子 如上所示,ColorPiker可以通过在光谱或色轮上拖动滑块,或者在RGB/HSV及十六进制的TextBox中直接输入颜色的数值改变Color属性。
1052 0