html分页器样式,自定义分页器

classPagination(object):def __init__(self, current_page, all_count, per_page_num=2, pager_count=11):"""封装分页相关数据

:param current_page: 当前页

:param all_count: 数据库中的数据总条数

:param per_page_num: 每页显示的数据条数

:param pager_count: 最多显示的页码个数

用法:

queryset = model.objects.all()

page_obj = Pagination(current_page,all_count)

page_data = queryset[page_obj.start:page_obj.end]

获取数据用page_data而不再使用原始的queryset

获取前端分页样式用page_obj.page_html"""

try:

current_page=int(current_page)exceptException as e:

current_page= 1

if current_page < 1:

current_page= 1self.current_page=current_page

self.all_count=all_count

self.per_page_num=per_page_num#总页码

all_pager, tmp =divmod(all_count, per_page_num)iftmp:

all_pager+= 1self.all_pager=all_pager

self.pager_count=pager_count

self.pager_count_half= int((pager_count - 1) / 2)

@propertydefstart(self):return (self.current_page - 1) *self.per_page_num

@propertydefend(self):return self.current_page *self.per_page_numdefpage_html(self):#如果总页码 < 11个:

if self.all_pager <=self.pager_count:

pager_start= 1pager_end= self.all_pager + 1

#总页码 > 11

else:#当前页如果<=页面上最多显示11/2个页码

if self.current_page <=self.pager_count_half:

pager_start= 1pager_end= self.pager_count + 1

#当前页大于5

else:#页码翻到最后

if (self.current_page + self.pager_count_half) >self.all_pager:

pager_end= self.all_pager + 1pager_start= self.all_pager - self.pager_count + 1

else:

pager_start= self.current_page -self.pager_count_half

pager_end= self.current_page + self.pager_count_half + 1page_html_list=[]#添加前面的nav和ul标签

page_html_list.append('''

  • ''')

first_page= '

首页' % (1)

page_html_list.append(first_page)if self.current_page <= 1:

prev_page= '

上一页'

else:

prev_page= '

上一页' % (self.current_page - 1,)

page_html_list.append(prev_page)for i inrange(pager_start, pager_end):if i ==self.current_page:

temp= '

%s' %(i, i,)else:

temp= '

%s' %(i, i,)

page_html_list.append(temp)if self.current_page >=self.all_pager:

next_page= '

下一页'

else:

next_page= '

下一页' % (self.current_page + 1,)

page_html_list.append(next_page)

last_page= '

尾页' %(self.all_pager,)

page_html_list.append(last_page)#尾部添加标签

page_html_list.append('''

''')return ''.join(page_html_list)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue-awesome-swiper中,要自定义分页,可以使用pagination组件来进行自定义。以下是一个简单的示例: ```vue <template> <div> <swiper :options="swiperOptions"> <swiper-slide v-for="(slide, index) in slides" :key="index"> <!-- 内容 --> </swiper-slide> <!-- 自定义分页 --> <div class="custom-pagination" slot="pagination"> <span v-for="(slide, index) in slides" :key="index" :class="{ active: index === activeIndex }" @click="goToSlide(index)" > {{ index + 1 }} </span> </div> </swiper> </div> </template> <script> import { swiper, swiperSlide } from "vue-awesome-swiper"; export default { components: { swiper, swiperSlide, }, data() { return { swiperOptions: { // 设置其他选项 }, slides: [ // 设置轮播项数据 ], activeIndex: 0, }; }, methods: { goToSlide(index) { this.activeIndex = index; }, }, }; </script> <style> .custom-pagination { /* 样式自定义 */ } .custom-pagination span { /* 样式自定义 */ } .custom-pagination span.active { /* 样式自定义 */ } </style> ``` 在这个示例中,我们首先导入`vue-awesome-swiper`的`swiper`和`swiperSlide`组件,然后在模板中使用`swiper`组件包裹轮播项,并设置`options`属性来配置其他选项。 接下来,在`swiper`组件内部,我们使用`slot`属性将自定义分页的内容放在名为"pagination"的插槽中。我们使用一个`v-for`循环来渲染分页中的每个页码,并在点击时调用`goToSlide`方法来切换轮播项。 最后,我们可以通过样式自定义分页的外观,通过修改`.custom-pagination`和`.custom-pagination span`的样式来实现自定义效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值