poll_Module

功能描述

移动端简易的投票系统，带投票规格说明和排行榜以及查看详情图，下拉滚动加载效果等

快速使用

1.引入CSS文件

<link rel="stylesheet" type="text/css" href="css/poll.css"/>
<link rel="stylesheet" type="text/css" href="css/poll_index.css"/>

2.引入JS文件

  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="js/layer.js"></script>

3.预加载数据列表，

           $(document).ready(function() {
                LoadingDataFn();
            });    
        
          //加载数据，通过AJAX获取后台数据进行html数据填充
            var LoadingDataFn = function() {
                var dom = '';
                dom = '<li class="Exhibition_block"><div class="E_center"><div class="E_top"><img src="images/pic_1.png"></div><div class="E_bot"><p>1号：1号头像</p><p><span>999</span>票</p><P class="sub ba_color">为TA投票</p></div></div></li>';
                $('.Exhibition').append(dom);
            };

4.数据滚动加载

            //数据太多，采用滚动加载方法
            $('#main').scroll(function() {
                var scrolls = $(this).scrollTop();
                //获取当前可视区域距离页面顶端的距离
                //当时滚动条离底部60px时开始加载下一页的内容
                if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
                    clearTimeout(timers);
                    //这里还可以用 [ 延时执行 ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
                    timers = setTimeout(function() {
                        page++;
                        LoadingDataFn();
                    }, 300);
                    if (page >= 1) {
                        clearInterval(timers);
                        //页面在向下滑动
                        if (scrolls >= windowTop) {
                            windowTop = scrolls;
                            layer.msg('到底啦');
                        } else {
                            //需要执行的操作
                            windowTop = scrolls;
                        }
                    }
                }
            });

其他说明

样式可根据需求自己修改,详细用法见poll_index.html

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18