zoukankan      html  css  js  c++  java
  • mui 左右滑动效果

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

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

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

      关键html+js代码:

    <!-- 主页面内容容器 -->
                    <div class="mui-content mui-scroll-wrapper"> 
                        <div id="container" style="min-400px;height:400px; 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的标准来即可。

      

      以上。

      

  • 相关阅读:
    按钮水波纹效果
    点击水波纹效果
    实现图片上传预览效果
    css 实现鼠标滑过流光效果
    插件地址参考
    移动前端经验
    移动端开发需要加的meta
    25款css动画库
    oracle 中的next_day函数
    Oracle replace函数
  • 原文地址:https://www.cnblogs.com/sunshine-wy/p/12884969.html
Copyright © 2011-2022 走看看