SUI Mobile 使用经验

最新推荐文章于 2023-09-25 10:17:43 发布

寻觅林踪迹

最新推荐文章于 2023-09-25 10:17:43 发布

阅读量1w

点赞数 2

文章标签： SUI picker C#

本文链接：https://blog.csdn.net/m0_38098560/article/details/82960316

版权

最近工作中需要做一个微信公众号菜单的功能，所以就用到手机端样式，我们用的就是 SUI 库。因为之前没有接触过手机端的UI库，加上API文档上的不全面，属实折腾了很久，所以记录下踩过的坑。

一、基本布局结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUI Mobile 使用</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body>
    <!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
    <div class="page-group">
        <!-- 单个page ,第一个.page默认被展示-->
        <div class="page">
            <!-- 标题栏 -->
            <header class="bar bar-nav">
                <a class="icon icon-me pull-left open-panel"></a>
                <h1 class="title">标题</h1>
            </header>

            <!-- 工具栏 -->
            <nav class="bar bar-tab">
                <a class="tab-item external active" href="#">
                    <span class="icon icon-home"></span>
                    <span class="tab-label">首页</span>
                </a>
                <a class="tab-item external" href="#">
                    <span class="icon icon-star"></span>
                    <span class="tab-label">收藏</span>
                </a>
                <a class="tab-item external" href="#">
                    <span class="icon icon-settings"></span>
                    <span class="tab-label">设置</span>
                </a>
            </nav>

            <!-- 这里是页面内容区 -->
            <div class="content">
                <div class="content-block">这里是content</div>
            </div>
        </div>

        <!-- 其他的单个page内联页（如果有） -->
        <div class="page">...</div>
    </div>

    <!-- popup, panel 等放在这里 -->
    <div class="panel-overlay"></div>
    <!-- Left Panel with Reveal effect -->
    <div class="panel panel-left panel-reveal">
        <div class="content-block">
            <p>这是一个侧栏</p>
            <p></p>
            <!-- Click on link with "close-panel" class will close panel -->
            <p><a href="#" class="close-panel">关闭</a></p>
        </div>
    </div>

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <!-- 默认必须要执行$.init(),实际业务里一般不会在HTML文档里执行，通常是在业务页面代码的最后执行 -->
    <!-- <script>$.init()</script> -->
    <script type="text/javascript">
        $(document).ready(function () {
            $.init();
        });
    </script> 
</body>
</html>

二、组件

1. picker

picker是一个JS实现的类似select的组件，他可以代替原生的select组件，并且功能更加强大、样式更加统一。

picker 需要初始化才能使用，你可以在一个 input 元素上初始化picker，当用户点击input的时候会弹出picker的弹层

 <input type="text" placeholder="选择水果" id="picker" readonly="">

var val = "", displayVal = "";

$("#picker").picker({
                toolbarTemplate: '<header class="bar bar-nav">\
  <button class="button button-link pull-left close-picker">关闭</button>\
  <button class="button button-link pull-right close-picker">确定</button>\
  <h1 class="title">标题</h1>\
  </header>',
                cols: [
                  {
                      textAlign: 'center',
                      values: ["1", "2", "3", "4"],//隐藏值
                      displayValues: ["苹果", "橘子", "香蕉", "葡萄"]//显示值
                  }
                ],
                formatValue: function (p, values, displayValues) {//自定义方法，用来控制如何显示picker的选中值
                    return displayValues[0];
                },
                onClose: function (picker, values, displayValues) {//picker 关闭时的触发动作
                    //这里获取关闭时选择的值
                    val = picker.value[0];
                    displayVal = picker.displayValue[0];
                },
            });

得到值：可以在 onClose 关闭方法中获取

clear清除

个人发现 picker 组件只能初始化一次，当想要动态为 picker 赋值时好像没用，所以暂时用的方法是在 picker 组件外写一个div，通过div实现清除。最好再调用 picker 的初始化方法。

$(".picker-div").html('');
$(".picker-div").html('<input type="text" placeholder="选择水果" id="picker" readonly="">');

2. 无限滚动

这里踩过的坑就是： $.init(); 方法一定要调用，页面布局一定要有 page 集合的容器，也就是页面的基本布局。

<div class="page-group">
        <div class="page page-current">
            <style type="text/css">
                .infinite-scroll-preloader {
                    margin-top: -20px;
                }
            </style>

            <header class="bar bar-nav">
                <h1 class="title">底部无限滚动</h1>
            </header>
            <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
            <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
                <div class="list-block">
                    <ul class="list-container">
                    </ul>
                </div>
                <!-- 加载提示符 -->
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
            </div>
        </div>
    </div>

<script>
        //无线滚动
        // 加载flag
        var loading = false;
        // 最多可加载的条目
        var maxItems = 100;

        // 每次加载添加多少条目
        var itemsPerLoad = 20;

        function addItems(number, lastIndex) {
            // 生成新条目的HTML
            var html = '';
            for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
            }
            // 添加新条目
            $('.infinite-scroll-bottom .list-container').append(html);

        }
        //预先加载20条
        addItems(itemsPerLoad, 0);
        //一定要初始化，无初始化方法滚动无效
        $.init();
        // 上次加载的序号
        var lastIndex = 20;
        // 注册'infinite'事件处理函数
        $(document).on('infinite', '.infinite-scroll-bottom', function () {

            // 如果正在加载，则退出
            if (loading) return;

            // 设置flag
            loading = true;

            // 模拟1s的加载过程
            setTimeout(function () {
                // 重置加载flag
                loading = false;

                if (lastIndex >= maxItems) {
                    // 加载完毕，则注销无限加载事件，以防不必要的加载
                    $.detachInfiniteScroll($('.infinite-scroll'));
                    // 删除加载提示符
                    $('.infinite-scroll-preloader').remove();
                    return;
                }

                // 添加新条目
                addItems(itemsPerLoad, lastIndex);
                // 更新最后加载的序号
                lastIndex = $('.list-container li').length;
                //容器发生改变,如果是js滚动，需要刷新滚动
                $.refreshScroller();
            }, 1000);
        });
    </script>

寻觅林踪迹

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
SUI Mobile 使用经验

最近工作中需要做一个微信公众号菜单的功能，所以就用到手机端样式，我们用的就是 SUI 库。因为之前没有接触过手机端的UI库，加上API文档上的不全面，属实折腾了很久，所以记录下踩过的坑。一、基本布局结构&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta ...
复制链接

扫一扫