类似百度的分页-ASP分页函数-可自定义显示文字和样式等

显示效果类似于百度搜索的一个分页函数,

可以自定义显示的文字和使用的样式,

效果请看百度,或者看实际应用:http://polycn.com/family/news.asp

 下面是函数的源码:

 

<%
'|
'|-------------------------------------------------------------------------
'| 名称:类似百度的ASP分页函数(可自定义个数,还可自定义样式)
'|
'| 参数:rsTotal      [in]rs记录集的总数
'|       onePageTotal [in]一页要显示的条数
'|       nowPageID    [in]现在页的ID
'|       parameterName[in]传递页码的参数名称
'|       showLinkTotal[in]要显示链接的个数
'|       prevText     [in]上一页链接文字(为空将不显示)(参考值:上一页、Prev、◄、<<)
'|       nextText     [in]下一页链接文字(为空将不显示)(参考值:下一页、Next、►、>>)
'|       useClassName [in]自定义样式class名称(为空将使用默认样式)
'|
'| 返回:返回生成的链接结果
'|
'| 作者:EnVon, QQ:407542585, Blog:http://blog.csdn.net/envon123
'|
'| 样式示例:
'|      .pageBar { font-family:Arial; font-size:12px; margin:0; padding:0; text-align:center; background-color:#fff; display:inline; }
'|      .pageBar a { color:#555; padding:0 8px; margin:0 3px; display: inline-block; background-color:#fff; border: #e7ecf0 1px solid; height:22px; line-height: 22px; text-decoration: none; }
'|      .pageBar a:hover { background-color:#ebebeb; color:#f00; }
'|      .pageBar strong { color:#555; padding:0 7px; marg
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在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`的样式来实现自定义效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值