css 案例 横向滚动渐变

效果

完整代码:

<template><view class="content"><view class="tab"><view class="tab-item" v-for="(item,index) in tab" :key="index" @click="handlerTab(index)":class="index==tabIndx?'selected':''">{{item}}</view></view></view>
</template><script>export default {data() {return {title: 'Hello',tab: ['苹果', '香蕉', '蜂蜜', '巧克力', '大盘鸡', '被子', '苹果', '香蕉', '蜂蜜', '巧克力', '大盘鸡', '被子'],tabIndx: 0,}},methods: {handlerTab(index) {this.tabIndx = index;}}}
</script><style lang="scss">.tab {display: flex;overflow-x: scroll;-webkit-mask: linear-gradient(90deg, #000, 70%, transparent);.tab-item {flex-shrink: 0;margin: 0 5px;padding: 5px 10px;border-radius: 20px;border: 1px solid #f1f1f1;}}// 隐藏滚动条.tab::-webkit-scrollbar {display: none;}.selected {background-color: #f9ea16;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/11950.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

winserver系统设置图片查看器

新建 .bat 批处理执行文件&#xff0c;内容如下&#xff1a; echo off&cd&color 0a&cls echo Set Win10 Photo Viewer reg add "HKLM\SOFTWARE\Microsoft\Windows Photo Viewer\Capabilities\FileAssociations" /v ".jpg" /t REG_SZ /d Photo…

MySQL——利用变量进行查询操作

新建链接&#xff0c;自带world数据库&#xff0c;里面自带city表格。 DQL # MySQL利用变量进行查询操作 set cityNameHaarlemmermeer; select * from city where NamecityName;# 多个结果查询 set cityName1Haarlemmermeer; set cityName2Breda; set cityName3Willemstad; s…

Mysql--期末复习

目录 一.变量 1.系统变量 global session 2.用户自定义变量 3.局部变量 二.触发器 1.pysx函数(销售)拼音缩写触发器 2.goods维护(存储过程) 3.xkglxt 4.订单延期 一.变量 1.系统变量 global session 2.用户自定义变量 1.不用提前声明&#xff0c;使用时直接 变量…

古月居讲师/签约作者招募计划

机器人&#xff0c;作为一个集成了多学科技术的复杂系统&#xff0c;其开发过程充满了挑战。为了帮助开发者们更好地克服这些挑战&#xff0c;提升项目的开发效率和质量&#xff0c;古月居特别招募[博客签约作者/课程讲师]。如果您平常热爱记录、分享开发者经验的习惯&#xff…

Emby for Mac(轻松管理多媒体影音库)1.9.9中文版

Emby for Mac是一款强大的多媒体影音库管理工具&#xff0c;可以帮助用户轻松管理和浏览自己的影音资源。它可以将用户的个人视频、音乐和照片组合在一起&#xff0c;并将其流式传输到用户的设备上。 Emby for Mac 1.9.9中文版下载 Emby for Mac具有易于使用的界面&#xff0c;…

分布式与一致性协议之PBFT算法

在分布式系统中&#xff0c;数据的一致性是一个至关重要的问题。为了保证分布式系统中节点之间的数据一致性&#xff0c;人们提出了许多一致性协议和算法。 其中&#xff0c;PBFT&#xff08;Practical Byzantine Fault Tolerance&#xff0c;实用拜占庭容错&#xff09;算法是…

content-type之multipart/form-data和application/json比较

multipart/form-data 知识点: 用途: 主要用于文件上传以及包含非ASCII字符或二进制数据的表单数据提交。它将表单数据分割成多个部分&#xff0c;每个部分前都有一个boundary字符串作为分隔&#xff0c;可以包含文本字段和文件字段。结构: 包含了Content-Disposition头部&…

机器学习案例:加州房产价格(四)

参考链接&#xff1a;https://hands1ml.apachecn.org/2/#_12 数据探索和可视化、发现规律 通过之前的工作&#xff0c;你只是快速查看了数据&#xff0c;对要处理的数据有了整体了解&#xff0c;现在的目标是更深的探索数据。 首先&#xff0c;保证你将测试集放在了一旁&…

【Docker系列】Linux部署Docker Compose

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

RestTemplate接口请求发送json、form数据格式以及处理接口错误状态码400 null

在使用RestTemplate发送HTTP请求时&#xff0c;你可以通过不同的方式发送JSON或表单数据&#xff08;application/x-www-form-urlencoded&#xff09;。同时&#xff0c;处理接口错误状态码&#xff08;如400&#xff09;和返回null的情况也是很重要的。以下是一些示例代码&…

山东济南中国当代文化名人颜廷利:大自然赋予人类众生的真正贵重礼物

大自然赋予了众生---火&#xff08;太阳&#xff0c;万物生长靠太阳&#xff09;、水&#xff08;河流&#xff0c;水是生命之源&#xff09;、木&#xff08;空气&#xff0c;生命就在一翕一合的呼吸之间&#xff09;、土&#xff08;大地&#xff0c;坤为大地之母&#xff0c…

【Python】Python中类的__iter__()方法

在Python中&#xff0c;__iter__ 方法是一个特殊的方法&#xff0c;它用于定义一个对象的迭代器行为。这个方法是面向对象编程中实现可迭代对象&#xff08;即支持迭代的对象&#xff09;的一部分。当你创建一个类&#xff0c;并且希望其实例能够在例如 for 循环中被迭代时&…

Hive-拉链表的设计与实现

Hive-拉链表的设计与实现 在Hive中&#xff0c;拉链表专门用于解决在数据仓库中数据发生变化如何实现数据存储的问题。 1.数据同步问题 Hive在实际工作中主要用于构建离线数据仓库&#xff0c;定期的从各种数据源中同步采集数据到Hive中&#xff0c;经过分层转换提供数据应用…

MYSQL 存储过程 函数

ddldml ​ CREATE TABLE student (id int(11) NOT NULL AUTO_INCREMENT COMMENT 学号,createDate datetime DEFAULT NULL,userName varchar(20) DEFAULT NULL,pwd varchar(36) DEFAULT NULL,phone varchar(11) DEFAULT NULL,age tinyint(3) unsigned DEFAULT NULL,sex char(2)…

【JAVA SE】初识JAVA

✨✨欢迎大家来到Celia的博客✨✨ &#x1f389;&#x1f389;创作不易&#xff0c;请点赞关注&#xff0c;多多支持哦&#x1f389;&#x1f389; 所属专栏&#xff1a;JAVA 个人主页&#xff1a;Celias blog~ 目录 ​编辑 一、关于JAVA 1.1 JAVA语言简介 1.2 语言优势 1…

链表常见OJ题

目录 题目一&#xff1a;移除链表元素 &#xff08;1&#xff09;题目链接 &#xff08;2&#xff09;题目要求 &#xff08;3&#xff09;题解 题目二&#xff1a;反转链表 &#xff08;1&#xff09;题目链接 &#xff08;2&#xff09;题目要求​编辑 &#xff08;3…

蓝桥杯备战.19有奖问答dfs

P9230 [蓝桥杯 2023 省 A] 填空问题 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> using namespace std; #define endl \n //#define int long long const int N 2e510; int a[N],w[N]; int ans 0; void dfs(int score,int cnt) {if(cnt>3…

项目9-网页聊天室1(注册+Bycrpt加密)

1.准备工作 1.1.前端页面展示 1.2 数据库的建立 我们通过注册页面&#xff0c;考虑如何设计用户表数据库。 用户id&#xff0c;userId用户名&#xff0c;唯一&#xff0c;username用户密码&#xff0c;password&#xff08;包括密码和确认密码ensurePssword【数据库没有该字段…

【简单介绍下Milvus】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

网络3--网络通信的深度理解(端口号)

网络通信的进一步理解 两个主机间进行通信&#xff0c;其实是两个主机间的软件进行通信&#xff0c;软件也就是可执行程序&#xff0c;运行时就是进程&#xff0c;所以也为进程间通信。 进程间通信需要共享资源&#xff0c;这里两个主机间的共享资源是网络&#xff0c;利用的是…