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…

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

机器人&#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;…

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

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

【Docker系列】Linux部署Docker Compose

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

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

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

Hive-拉链表的设计与实现

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

【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…

项目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;利用的是…

Visual Studio生成C++的DLL文件(最简单版)

前言 当你在使用C编写一些可重用的代码时&#xff0c;将其打包成一个动态链接库&#xff08;DLL&#xff09;可以使其更容易地被其他项目或者程序调用和使用。Visual Studio提供了一种简单的方式来生成C的DLL文件。下面是一个关于如何在Visual Studio中生成C的DLL文件的简单教…

【 第一性原理计算方法及应用】

第一性原理计算方法及应用述

对接极速行情丨DolphinDB MDL 行情插件使用指南

通联数据依托于金融大数据&#xff0c;结合人工智能技术为投资者提供个性化、智能化、专业化投资服务&#xff0c; MDL 则是通联数据提供的高频行情数据服务。DolphinDB 提供了能够从 MDL 服务器获取高频行情数据的 DolphinDB MDL 插件&#xff0c;帮助用户方便地通过 DolphinD…

算法day06

第一题 1658. 将 x 减到 0 的最小操作数 如题上述&#xff1a; 本题原来的意思给定一个数字x&#xff0c;从数组的左边或者右边 使用x减去数组中的数字&#xff0c;直到减去最后一个数字为0时&#xff0c;返回最小的操作次数&#xff1b;如果最终减去的数组中的数字之后不能得…

HR系统组合漏洞挖掘过程

前言 某天在项目中遇到了一个奇怪的人才管理系统&#xff0c;通过FOFA&#xff08;会员可在社区获取&#xff09;进行了一番搜索&#xff0c;发现了该系统在互联网上的使用情况相当广泛。于是&#xff0c;我开始了后续的审计过程。 在搜索过程中&#xff0c;我偶然间找到了一份…

Nginx静态压缩和代码压缩,提高访问速度!

一、概述 基于目前大部分的应用&#xff0c;都使用了前后端分离的框架&#xff0c;vue的前端应用&#xff0c;也是十分的流行。不知道大家有没有遇到这样的问题&#xff1a; 随着前端框架的页面&#xff0c;功能开发不断的迭代&#xff1b;安装的依赖&#xff0c;不断的增多&a…

无人机的用途

无人机&#xff0c;即无人驾驶飞机&#xff0c;其用途广泛且多样&#xff0c;涉及到多个领域。 在农业领域&#xff0c;无人机通过搭载各种传感器和相机&#xff0c;可以对农田进行空中巡视&#xff0c;收集农田数据&#xff0c;如土壤含水量、气温、湿度等&#xff0c;以及植…