Better-Scroll使用（jqueryAjax+VUE+封装的日期选择插件）练习

最新推荐文章于 2023-01-18 15:48:03 发布

Sspit

最新推荐文章于 2023-01-18 15:48:03 发布

阅读量613

点赞数 1

文章标签： Vue

本文链接：https://blog.csdn.net/qq_35126546/article/details/93737603

版权

Better-Scroll下载

npm下载 better-scroll插件
npm install better-scroll --save

—Vue-cli中直接 import BScroll from ‘better-scroll’

–我这里由于是混合app开发（webView），所以直接在单页面通过引入script（es5）来使用

HTML5

<div id="app">
    <div style="width: 100%;position:fixed;z-index:7999;height:17rem;background-color: #f4f4f4">
        <div class="header">
            <img src="imgs/time.png">
            <div id="showDate" v-cloak class="title">时间:{{date}}</div>
            <img id="selectDate" data-year="" data-month="" src="imgs/qiehuan.png">
            <!--            <calendar :show.sync="show" :mode="mode" @change="onChange"/>-->
        </div>
        <div class="mid-text">
            <div class="mid-title">

                <img src="imgs/tongji.png">
                <div>套餐办理统计({{date.substring(4)}}月):</div>
            </div>
            <div class="bottom-text" v-cloak>
                <div class="empty" style="margin-top: 5%;width:100%;text-align: center" v-show="combos.length==0">暂无数据
                </div>
                <div v-for="(item,index) in combos" class="type1">

                    <div :style="{font,color:item.color}">{{item.buyCount}}人</div>
                    <div style="color: #8c8c8c">{{item.name}}</div>
                </div>

            </div>
        </div>
        <div class="bottom-table">
            <div class="bottom-top-title">
                <img src="imgs/ziyuan.png">
                <div>套餐办理明细:</div>
            </div>
            <ul class="table-title">
                <li>账号</li>
                <li>姓名</li>
                <li>套餐类型</li>
                <li>时间</li>
            </ul>
        </div>
    </div>
    <div class="vscroll" ref="wrapper">
        <div class="content" ref="content">
            <div v-for="(item, index) in datas" :class="{'table-text': true}">
                <div>{{ item.user.mobile }}</div>
                <div class="nameandclass">{{ item.child.name }}<span v-show="item.class.name != null"
                                                                     style="color: #8c8c8c"></span>({{ item.class.name }}）</div>
                <div>{{ item.combo.name }}</div>
                <div>{{ dateTime(item.creationTime )}}</div>

            </div>
            <div class="bottom-tip">
                <span class="loading-hook"></span>
            </div>
        </div>

    </div>
    <div style="display: none" id="client" onclick="clients()">客户端</div>
    <div style="display: none" id="token" onclick="token()">token</div>
</div>

JS


    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);
    // var qb = new QiaobeiNative();
    // $("#client").click();
    // $("#token").click();
    //获取schoolId
    var schoolId = $.getQueryString("schoolId");
    new Vue({
        el: '#app',
        data: {
            items: [],
            date: "请选择",
            page: 1,
            noDate: false,
            datas: [],
            show: false,
            mode: 'single',
            combos: [],
            length : 0,
            height : "min-height: 30rem;",
            font: "font-size:3rem"
        },

        mounted: function () {
            var that = this;
            that.date = $.getNowDate();
            that.getData(that.page);
            that.$refs.content.style.minHeight = "8rem";
            //封装的移动端dateSelect插件
            $("#selectDate").dateTimePicker("showDate", {
                callback: function (selectOneObj, selectTwoObj) {
                    $("#showDate").attr('data-year', selectOneObj.value);
                    $("#showDate").attr('data-month', selectTwoObj.value);
                    that.date = selectOneObj.value + selectTwoObj.value;
                    that.combos = [];
                    that.datas = [];
                    that.page = 1;
                    $(".loading-hook").html('加载更多');
                    that.getData(that.page);

                }
            })


        },

        methods: {
            getData: function (page) {
                var that = this;
                //接口名怕暴露，隐蔽之
                $.userApi.XXX(428, {
                    month: that.date,
                    pageNo: page,
                    pageSize: 20
                }).done(function (res) {

                    var items = eval(res.data.orders.items);
                 
                    var combos = eval(res.data.combos);
                    that.total = items.length;
                    that.$refs.content.style.minHeight = (that.total*5)+"rem";
                    if (that.total == 0) {
                        $(".loading-hook").html("无更多数据")
                    }
                    if (that.page == 1) {
                        $.each(combos, function (key, value) {
                            var obj = new Object();
                            obj.buyCount = value.buyCount;
                            obj.name = value.name;
                            if (value.name.search("1分钱") != -1) {

                                obj.color = "blue"
                            }
                            if (value.name.search("季") != -1) {

                                obj.color = "#ed6152"
                            }
                            if (value.name.search("月") != -1) {

                                obj.color = "#ffc73a"
                            }
                            if (value.name.search("年") != -1) {
                                obj.color = "#479df5"
                            }
                            that.combos.push(obj)
                        });
                    }
                    //在dom渲染完成时候触发这个回调
                    that.$nextTick(function () {
                        for (var i = 0; i < items.length; i++) {
                            that.datas.push(items[i]);
                        }
                        if (!that.scroll) {
                            //关键就是需要实例BScroll对象
                            that.scroll = new BScroll(that.$refs.wrapper, {
                                 bounce:true
                            });
                            //触发ontouched事件
                            that.scroll.on('touchend', function (pos) {
                                if (pos.y < (this.maxScrollY - 30)) {
                                    that.page++;
                                    if (that.total > 1) {
                                        $(".loading-hook").html('加载更多');
                                        that.getData(that.page);
                                        that.scroll.refresh()

                                    } else {

                                        $(".loading-hook").html('无更多数据');
                                        that.scroll.refresh()
                                    }
                                }
                            })
                        } else {
                            that.scroll.refresh()
                        }


                    })


                })
            },
            dateTime: function (date) {
                var dates = date.slice(0, 10);

                return dates.replace(/-/g, ".");
            },
        }

    });

**注意，$.getQueryString是我自己封装的获取url中参数的方法，这里我为了开发方便ajax中参数写死了
dateTimePicker插件的封装代码如下：
**

$.fn.extend({
    dateTimePicker: function (selector, opt) {
        var selectDateDom = $(this);
        var showDateDom = $("#" + selector);
        // 初始化时间
        var now = new Date();

        var nowYear = now.getFullYear();
        var nowMonth = now.getMonth() + 1;
        showDateDom.attr('data-year', nowYear);
        showDateDom.attr('data-month', nowMonth);

        function formatYear(nowYear) {
            var arr = [];
            for (var i = nowYear; i <= nowYear + 5; i++) {
                arr.push({
                    id: i + '',
                    value: nowYear + (nowYear - i)
                });
            }
            return arr;
        }

        function formatMonth() {
            var arr = [];
            for (var i = 1; i <= 12; i++) {
                if (i < 10) {
                    arr.push({
                        id: i + '',
                        value: '0' + i
                    });
                } else {
                    arr.push({
                        id: i + '',
                        value: i
                    });
                }

            }
            return arr;
        }
        var yearData = function (callback) {
            // settimeout只是模拟异步请求，真实情况可以去掉
            // setTimeout(function() {
            callback(formatYear(nowYear))
            // }, 2000)
        }
        var monthData = function (year, callback) {
            // settimeout只是模拟异步请求，真实情况可以去掉
            // setTimeout(function() {
            callback(formatMonth());
            // }, 2000);
        };
        var oneLevelId = showDateDom.attr('data-year');

        var twoLevelId = showDateDom.attr('data-month');
        //callback自己写
        opt = $.extend({
            title: '时间选择',
            itemHeight: 35,
            oneLevelId: oneLevelId,
            twoLevelId: twoLevelId,
            showLoading: true,
            callback: function (selectOneObj, selectTwoObj) {
                showDateDom.attr('data-year', selectOneObj.value);
                showDateDom.attr('data-month', selectOneObj.value);
                showDateDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ');
            }
        }, opt)
        selectDateDom.bind('click', function () {


            var iosSelect = new IosSelect(2,
                [yearData, monthData],
                opt);
        });

    },

})
//获取日期
$.extend({
    getNowDate: function () {
        var now = new Date();
        var nowYear = now.getFullYear();
        var nowMonth = now.getMonth() + 1;
        if (nowMonth < 10) {
            nowMonth = "0" + nowMonth;
        }
        return nowYear + nowMonth
    }
})

这里用到了iosSelect.js
**其中css中，ref="scroll"的父容器高度一定要小于ref="content"的高度，才可以触发better-scroll
**

CSS



body{
    background-color: #f4f4f4;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 44px;
    width: 100%;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
    background-color: #fff;

    display: flex;
    padding-left: 5%;
    z-index: 8000;
}
.mid-text{
    position: fixed;
    top: 60px;
    left:2%;
    width: 96%;
    background-color:#FFFFFF;
    height: 10rem;
    margin: 0 auto;
    border-radius: 5%;
    z-index: 8000;

}
.bottom-table{
    position: fixed;
    top: 240px;
    left: 2%;
    width: 96%;
    background-color: #FFFFFF;
    height: 5rem;
    margin: 0 auto;
    border-radius: 5%;
    z-index: 8000;

}
.bottom-top-title {

    display: flex;
    height: 2rem;
    line-height: 2rem;
}
.bottom-top-title img{
    width: 1.2rem;
    height:1.2rem;
    margin-top: 1.5%;
    margin-left: 3%;
}
.table-title{
    display: flex;
}
.table-title li{
    width: 25%;
    text-align: center;
    list-style-type:none;
    color: #8c8c8c;
    height: 3rem;
    line-height: 3rem;
}
.mid-title{
    display: flex;
    height: 3rem;
    line-height: 3rem;
}
.mid-title img{
    width: 1.2rem;
    height:1.2rem;
    margin-top: 4%;
    margin-left: 3%;
}
.mid-title div{

}
.header >img{
    width: 1.3rem;
    height:1.3rem;
    margin-top: 2.5%;
}
.header > .title {
    margin-left: 2%;
    font-size: 1.2rem;
    height: 2.5rem;
    line-height: 2.5rem;
    width: 75%;
}
.bottom-text{
    width: 100%;
    height: 6rem;
    display: flex;
}
.bottom-text div{

    justify-content: center;
    text-align: center;
    line-height: 2.2rem;

}
.type1{
    width: 100%;
}
.type1 div:first-child{
    font-size: 2rem;
    margin-top: 1rem;
}
.vscroll{
    position: fixed;
    width: 96% !important;
    margin: 0 2%;
    background-color: #FFFFFF;
    z-index: 9;
    top: 20rem;
    height: 4rem;


}
/* iphone5 */

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
    .vscroll{
        position: fixed;
        width: 96% !important;
        margin: 0 2%;
        height: 4rem;
        z-index: 9;
        top: 20rem;
        background-color:#f4f4f4;


    }


}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
    /*iPhone 6 Portrait*/
    .vscroll{
        position: fixed;
        width: 96% !important;
        margin: 0 2%;
        height: 4rem;
        z-index: 9;
        top: 20rem;
        background-color:#f4f4f4
    ;
    }
}
.content{
    background-color: #FFFFFF;
}
.table-text{
    display: flex;
    height: 5rem;
    line-height: 5rem;
    border-bottom: 1px solid #f5f5f5;
}
.table-text div{
    margin: 0 auto;
    line-height: 2.5rem;
    height: 2.5rem;
    width: 25%;
    text-align: center;

}
.bottom-tip{
    height: 2rem;
    line-height: 2rem;
    color: #8c8c8c;
    text-align: center;
}

OK，效果如下（为了防止泄露信息，数据有码了–！）

在这里插入图片描述

Sspit

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Better-Scroll使用（jqueryAjax+VUE+封装的日期选择插件）练习

Better-Scroll下载npm下载 better-scroll插件npm install better-scroll --save—Vue-cli中直接 import BScroll from ‘better-scroll’–我这里由于是混合app开发（webView），所以直接在单页面通过引入script（es5）来使用HTML5<div id="app"> ...
复制链接

扫一扫