ms-for写分页时，上一页会受下一页影响的bug

areyouse7en commented 8 years ago

/! built in 2016-6-12:3 version 2.08 by 司徒正美 /

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>avalon test</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.7.0/css/amazeui.min.css">
    <script src="avalon.js"></script>
    <script>
    var vm = avalon.define({
        $id: "test",
        curPage: 1,
        totalPages: 20,
        totalItems: 193,
        pageItems: [1, 2, 3, 4, 5],
        pageSize: 10,
        changePage: function(p) {
            this.curPage = p;
            console.log('curPage:' + this.curPage);
            if (this.totalPages <= 5) {
                this.pageItems = avalon.range(1, this.totalPages + 1);
            } else {
                if (this.curPage < 4) {
                    this.pageItems = avalon.range(1, 6);
                } else if (this.curPage > 3 && this.curPage < this.totalPages - 1) {
                    this.pageItems = avalon.range(this.curPage - 2, this.curPage + 3);
                } else {
                    this.pageItems = avalon.range(this.totalPages - 4, this.totalPages + 1);
                }
            }
        }
    })
    </script>
</head>

<body>
    <div class="am-container" ms-controller="test">
        <div class="am-u-md-4">
            <p class="am-margin am-text-sm">共 {{@totalItems}} 条记录</p>
        </div>
        <div class="am-u-md-8">
            <ul class="am-pagination am-pagination-right am-text-xs">
                <li><a href="javascript:;" ms-click="@changePage(1)">首页</a></li>
                <li ms-class="{'am-disabled' : @curPage == 1}"><a href="javascript:;" ms-click="@changePage(@curPage-1)"><span class="am-icon-angle-double-left"></span></a></li>
                <li ms-for="el in @pageItems" ms-class="{'am-active' : @curPage == el}" ms-click="@changePage(el)"><a href="javascript:;">{{el}}</a></li>
                <li ms-class="{'am-disabled' : @curPage == @totalPages}"><a href="javascript:;" ms-click="@changePage(@curPage+1)"><span class="am-icon-angle-double-right"></span></a></li>
                <li><a href="javascript:;" ms-click="@changePage(@totalPages)">尾页</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

Bug： 1：点上一页，当前页是3，应该是2，结果会变成4，但是改成@changePage(0+@curPage-1)或者@changePage(-1+@curPage)后就好了；如果把下页面按钮删掉，上一页又正常了。 2：有时候上一页下一页点几遍后，再点首页或者尾页，会出现重复渲染的情况，见图。 qq 20160612115131

RubyLouvre commented 8 years ago

使用今天的这个版本，local变量问题，已经修正 https://github.com/RubyLouvre/avalon/tree/master/dist

RubyLouvre commented 8 years ago

这个UI库不错

areyouse7en commented 8 years ago

上一页的这个问题还是在啊。。。 ms-click="@changePage(@curPage-1)

RubyLouvre commented 8 years ago

好了

RubyLouvre / avalon

ms-for写分页时，上一页会受下一页影响的bug #1458