分页器

r囧r小猫 2023-10-10 08:27 51阅读 0赞

<ul>

</li>

</li>

<a v-on:click="btnClick(index)">\{ \{ index \}\}</a>

</li>

</li>

</li>

<li>

<a>

共

<i>\{ \{all\}\}</i>页

</a>

</li>

<li>

<a>

<input

class="skipPage"

type="number"

name="enterPage"

id="enterPage"

v-model="skipPage"

value

</a>

</li>

<li>

</li>

</ul>

</div>

</template>

export default \{

data() \{

return \{

all: 20, // 总页数

cur: 1, // 当前页码

skipPage: null // 页码页面

\};

\},

computed: \{

indexs() \{

var left = 1;

var right = this.all;

var ar = \[\];

if (this.all >= 5) \{

if (this.cur > 3 && this.cur < this.all - 2) \{

left = this.cur - 2;

right = this.cur + 2;

\} else \{

if (this.cur <= 3) \{

left = 1;

right = 5;

\} else \{

right = this.all;

left = this.all - 4;

while (left <= right) \{

ar.push(left);

left++;

while (left <= right && ar.length < 5) \{

ar.push(left);

left++;

return ar;

\},

watch: \{

cur: function(oldValue, newValue) \{

console.log(arguments);

\},

methods: \{

btnClick: function(data) \{

if (data !== this.cur) \{

// 点击每个页码的事件

this.cur = data;

\} else if (data !== this.cur) \{

// 点击跳转的页码的事件

// 跳转页码

if (data > this.all) \{

this.skipPage = this.all;

if (data <= 1) \{

data = 1;

this.skipPage = 1;

this.cur = data;

\},

pageClick: function() \{

console.log("现在在" + this.cur + "页");

\};

</script>

<style>

.page-bar \{

margin: 40px;

.skipPage \{

width: 30px;

input::-webkit-inner-spin-button,

input::-webkit-outer-spin-button \{

\-webkit-appearance: none;

input\[type="number"\] \{

\-moz-appearance: textfield;

ul,

li \{

margin: 0px;

padding: 0px;

li \{

list-style: none;

.page-bar li:first-child > a \{

margin-left: 0px;

.page-bar a \{

border: 1px solid \#ddd;

text-decoration: none;

position: relative;

float: left;

padding: 6px 12px;

margin-left: -1px;

line-height: 1.42857143;

color: \#337ab7;

cursor: pointer;

.page-bar a:hover \{

background-color: \#eee;

.page-bar a.banclick \{

cursor: not-allowed;

.page-bar .active a \{

color: \#fff;

cursor: default;

background-color: \#337ab7;

border-color: \#337ab7;

.page-bar i \{

font-style: normal;

color: \#d44950;

margin: 0px 4px;

font-size: 12px;

</style>

转载于:https://www.cnblogs.com/yangwan/p/11344745.html

分页器

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关分页器

相关 vue常用分页器

相关 JS JQ table分页器

相关 django 自带分页器

相关 Mybatis拦截器分页

相关 django分页器

相关 Swiper自定义分页器

相关 Django---分页器、中间件

相关分页器实现

相关重构-分页器