vant的分页组件、修改van-pagination组件点击时样式

最新推荐文章于 2024-05-27 20:57:19 发布

岁月神偷もう

最新推荐文章于 2024-05-27 20:57:19 发布

阅读量594

点赞数

CC 4.0 BY-SA版权

文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/m0_71939262/article/details/130008853

这段CSS代码定义了van-pagination组件中按钮未点击和点击时的颜色样式，包括背景色和文字颜色。未点击状态下，按钮是灰色(#e1e1e1)背景，深灰(#666666)文字；点击后，按钮变为红色(#df3535)，文字变为白色(#fff)。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//按钮未点击时的颜色

/deep/ .van-pagination__item {

width: 40px;

height: 40px;

background: #e1e1e1;

border-radius: 8px;

margin-left: 10px;

color: #666666;

}

// 按钮点击时的颜色

/deep/ .van-pagination__item--active {

background: #df3535;

}

//文字未点击时的颜色

/deep/ .van-pagination__item {

color: #666666;

}

//文字点击时的颜色

/deep/ .van-pagination__item--active {

color: #fff;

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

岁月神偷もう

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vant list列表组件分页场景使用及搜索框输入-请求数据-防抖处理

luoxiaonuan_hi的博客

05-25

2434

vant list列表组件分页场景使用及搜索框输入-请求数据-防抖处理

vant （ weapp ） - - - - - van-tabs组件选中下划线初始位置异常

最新发布

Dark_programmer的博客

07-01

1029

vant （ weapp ） - - - - - van-tabs组件选中下划线初始位置异常

参与评论您还未登录，请先登录后发表或查看评论

Vant踩坑1——Pagination 分页组件样式修改

weixin_47546788的博客

01-18

2322

Vant踩坑1——Pagination 分页组件样式修改

vant pagination 分页(前后端分别介绍)(适合初学者阅读)

like896369216的博客

05-01

7471

目录前端：(vue) 1.关于vant安装与组件局部引入不做解释，具体介绍参考官网：https://youzan.github.io/vant/#/zh-CN/quickstart 2.基础用法 3.举例说明（实现一个小说章节列表） 1.定义一个div，用于放置章节内容 2.定义分页组件 3.在js中定义事件methods 后端：（node）前端：(vue) 1.关于vant安装与组件局部引入不做解释，具体介绍参考官网：https://youzan.github.io/van

vant中 list组件使用，分页及伪分页做法

luoxiaonuan_hi的博客

08-19

3829

这次实现的思路和上面的就不一样了，这次是在页面滚动到底部时，往空数组中添加数据，每次滚动到底部，会巧妙的运用数组的splice方法，从数组中截取数据，这个方法也有删除的意思，就是把截取的数据从数组中删除掉，splice方法返回删除的数据，所以当截取完所有数据，就可以判断是否还有数据，没有数据就完成了。// 在后台没有提供分页的基础上，要想长列表实现瀑布流滚动，当列表即将滚动到底部时，会触发事件并加载更多列表项。依旧是先监听页面的滚动事件。

vant 自定义 van-dropdown-item的用法

10-15

在实际应用中，开发者可能还需要处理一些交互事件，例如点击关闭按钮时关闭下拉菜单，或者点击“确定”和“取消”按钮时触发相应的业务逻辑。这可以通过 Vue.js 的事件绑定（`v-on:click` 或简写 `@click`）来实现，...

解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题

11-19

在Vue项目中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题（title）始终不会根据所选的选项进行更新。本篇将详细介绍如何解决这个问题。首先，确保正确安装并引入Vant组件...

vant 中van-list的用法说明

01-18

van-list里面的元素不能有float样式，否则会连续触发 load 事件原代码 <van v-model=active change=getTypeDate> <van v-for=(tab) title=tab.name key=tab.id> <div xss=removed class=pic-content> <...

scoped下修改vantUI组件的样式

qq_36449635的博客

09-10

868

使用stylus预处理器时，修改scoped下的vantUI组件的样式使用使用深度选择器，将scoped样式中的选择器“深入”，来影响子组件用法：选择器名为要修改样式的引用组件名，在选择器之前加/deep/即可。示例： <template> <div class="title"> <van-dropdown-menu></van-dropdown-menu> </div> </template> <style lan

基于vue实现分页/翻页组件paginator示例

01-19

序言项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教当页数小于999(包括999)页页数大于999页首页或尾页disabled 10页之内显示 Usage 参数 pageCount: 整数,代表总页数监听事件 @togglePage: 监听切换页面事件,可以获取到当前前往页的页数父组件调用方法 index.vue <template lang=html> <div> <paginator pageCount=pageCount togglePage=togglePage($event)></paginator>

vue3+vant组件库实现数据分页

weixin_50805397的博客

05-27

523

vue+vant组件实现上拉加载（分页）

2201_75763401的博客

04-10

976

<van-list v-model:loading="loading" :offset="30" :finished="finished" finished-text="没有更多了" @load="onLoad" > <div v-for="(item, index) in data.list" class="record-list" :key="index"> <p>{{item.title}}</p> </div> &lt

vue + vant 实现前端分页

m0_73478445的博客

01-02

1328

前端vue + vant 实现分页

APP开发-Vue3+vant实现数据列表下拉分页功能

不觉晓晓的博客

06-23

4507

一、需求分析 1、数据列表页面初始化显示十条数据，当用户下拉页面的时候会再自动请求十条数据，如果数据加载完成，显示提示信息’已经到底了’ 二、分页效果图从动图中我们可以看出页面在下拉的时候会自动触发数据请求，在右边的Network栏中，我们可以监测它是往后台发送请求的，而其currentPage代表的请求页数每次也会自动加一。三、后台分页逻辑当我们数据列表数据量大的时候，我们一般都会采用分页的展示。怎么样实现分页？首先，前台我们要告诉后台，我们需要请求第几页数据，并且把每页展示的数据量告诉我。

vant List 列表组件分页加载更多关于清空数据后多触发一次网络请求问题

weixin_45965766的博客

04-21

727

切换查询分类或搜索等场景需要先把原来的数据项清空,这时如果已不是第一页数据清空后List组件会触发触底load事件,在@load中写的网络请求就会执行,加上自己主动调用的请求就多了一次,这里加上this.loading = true阻止触发load事件。配置immediate-check为false可以阻止初始化时立即执行滚动位置检查触发load事件。

vant list 分页问题

qq_43195831的博客

12-07

2407

vant list 分页问题是项目中基本都会遇到的，但是还是记录一下吧，万一哪天脑袋短路不会写了怎么办（略略略~~） // list 是vant按需引入的组件 // demand-accept-list 是自定义列表组件（分页写到组件外面） // null-data 自定义空数据页面（有需要的自己画界面吧） <list v-model="loading" :finished="finished" :finished-text="showEmpty

vant的下拉加载分页的使用

nanupup的博客

05-19

2650

分页接口的写法在mounted也要调用一下 vant下拉加载分页完成

手把手教你如何使用Vant组件

Orange71234的博客

06-28

1935

用vant2 代码写带有查询分页的表，不用后台数据

03-31

抱歉，作为一名AI语言模型，我无法直接给出代码，但我可以提供一些思路和参考。首先需要引入vant2的Table组件和Pagination组件。然后需要定义表格的列和数据，可以手动定义一个数组，也可以使用动态数据，例如从API或其他数据源获取数据。接着需要定义表格的查询条件，比如搜索关键词、筛选条件等，并在查询条件发生变化时触发数据的重新加载。最后需要使用Pagination组件来实现分页功能，将表格数据分页展示，并在页面切换时触发数据的重新加载。下面是一个简单的示例代码： ``` <template> <div> <van-search v-model="keyword" placeholder="搜索"></van-search> <van-dropdown-menu v-model="dropdownValue" :options="dropdownOptions" /> <van-table :columns="columns" :data="tableData" /> <van-pagination v-if="total > pageSize" :total-items="total" :items-per-page="pageSize" v-model="currentPage" @change="handlePageChange" /> </div> </template> <script> import { reactive, toRefs } from "vue"; import { Search, DropdownMenu, DropdownItem, Table, Pagination } from "vant"; import { fetchData } from "@/api"; // 从API获取数据 export default { components: { Search, DropdownMenu, DropdownItem, Table, Pagination }, setup() { const state = reactive({ keyword: "", dropdownValue: "", dropdownOptions: [ { text: "选项1", value: "opt1" }, { text: "选项2", value: "opt2" }, { text: "选项3", value: "opt3" }, ], columns: [ { title: "姓名", key: "name" }, { title: "年龄", key: "age" }, { title: "性别", key: "gender" }, ], tableData: [], currentPage: 1, pageSize: 10, total: 0, }); const loadData = async () => { const { keyword, dropdownValue, currentPage, pageSize } = toRefs(state); const params = { keyword: keyword.value, dropdownValue: dropdownValue.value, currentPage: currentPage.value, pageSize: pageSize.value, }; const { data, total } = await fetchData(params); // 从API获取数据 state.tableData = data; state.total = total; }; const handlePageChange = (page) => { state.currentPage = page; loadData(); }; return { ...toRefs(state), handlePageChange, }; }, }; </script> ``` 这只是一个简单的示例，实际需求可能更复杂，需要根据具体情况进行调整。