scroll-view 实现滑动显示,确保超出正常显示,小程序app,h5兼容

在uniapp 开开发的项目中,滑动操作是很多的
1.在插件市场使用了几款插件,但是都不太好用,要么是 显示的tab 过多,滑动到最后一个,当前显示那个跑左边显示不全,要么是滑动到最后一个后面的无法自动滑动,
2.基于借鉴别人写的以及自己处理了一下,目前感觉还行
3.使用需知道,显示的名字字段名字必须为name自己循环处理一下即可, 并且不能为空(实际情况也不会为空),目前发现bug
4.若有其他需求,请自行修改
在这里插入图片描述
第一步
新建组件scroll-easy.vue

<template><view class="mianbox"><scroll-view scroll-x="true" :style="{  height: defH + 'rpx',background: `${debg}` }" class="contentMain"scroll-with-animation :scroll-left="scrollLeft"><view :style="{  height: defH + 'rpx',lineHeight: defH + 'rpx'}" v-for="(item, index) in getList":key="index" class="scroll-item" @click="handItem(item,index)"><view :style="curIndex === index ? getActiveStyle : getDefaultStyle">{{ item.name }}</view></view></scroll-view></view>
</template>
<script>export default {props: {list: { // 循环的数据type: Array,required: true,default: () => ([])},// 选中的下标index: {type: Number,default: 0},// 默认传入样式itemStyleDefault: {type: Object,default: () => ({})},// 默认传入选中样式itemStyleActive: {type: Object,default: () => ({})},// 切换部分高度defH: {type: String,default: '100'},// 切换整块的背景颜色debg: {type: String,default: '#f1f1f1'},// 名字过长是否缩写isNameEllipsis: {type: Boolean,default: false},// 超过数量exceed: {type: String,default: "4"},},data() {return {father_W: 0, // 导航区宽度scrollLeft: 0, // 横向滚动条位置curIndex: 0,// 这里是最初的样式 如果父组件不传下来defcss: {'color': '#999','font-size': '14px','height': '100%',},actcss: {'color': '#333','font-size': '16px','font-weight': 'bold','height': '98%','margin': '0 auto',}}},computed: {getList() {let arr = this.listif (this.isNameEllipsis) {arr.map((item) => {item.name = this.formatwordlimit(item.name, this.exceed)})} return arr},getDefaultStyle() {return this.setStyle(this.defcss, this.itemStyleDefault)},getActiveStyle() {return this.setStyle(this.actcss, this.itemStyleActive)}},watch: {index: {handler(newVal, oldVal) {this.scrollLf(newVal)if (newVal) {this.scrollLf(newVal)}},immediate: true}},mounted() {//  初始化this.init()},methods: {formatwordlimit(cname, wordlength) {let nowLength = cname.lengthif (nowLength > wordlength) {return cname = cname.substr(0, wordlength) + '..'} else {return cname}},setStyle(target1, target2) {// 传进来的覆盖当前的 属性名要一致Object.assign(target1, target2)let style = ''Object.keys(target1).forEach((e) => {style += `${e}: ${target1[e]};`})return style},init() {// 返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。const query = uni.createSelectorQuery().in(this);// 获取到循环父级盒子的宽度query.select('.contentMain').boundingClientRect(data => {// 拿到 scroll-view 组件宽度this.father_W = data.width}).exec();// 获取标题区域宽度,和每个子元素节点的宽度以及元素距离左边栏的距离query.selectAll('.scroll-item').boundingClientRect(data => {let len = data.length;for (let i = 0; i < len; i++) {//获取到每个元素距离最左边的距离this.getList[i].left = data[i].left;//  获取到每个元素 宽度this.getList[i].width = data[i].width}}).exec()},handItem(item, index) {this.scrollLf(index)this.$emit('handItem', item, index);},scrollLf(index) {this.curIndex = index;this.scrollLeft = this.getList[index].left - this.father_W / 2 + this.getList[index].width / 2;}}}
</script><style scoped>.mianbox {width: 100%;height: 100%;}.contentMain {white-space: nowrap;}.scroll-item {display: inline-block;margin: 0 20rpx;text-align: center;}
</style>

直接使用
例如在index.vue
import scrollEasy from '../../components/scroll-easy.vue'注意路径


<template><view>1.默认样式<view><scrollEasy :index='currindex' :list='category' @handItem='handthis' /></view><view>1.默认选中下标<scrollEasy :index='currindex1' :list='category' @handItem='handthis' /></view><view>2.自定义背景颜色<scrollEasy :list='category' debg='pink' :index='currindex' @handItem='handthis' /></view><view>3.自定义tab 默认样式<scrollEasy :list='category' :index='currindex' @handItem='handthis':item-style-default="{ 'font-size': '32rpx','color': 'red'}" /></view><view>4.自定义tab 选中样式<scrollEasy :list='category' :index='currindex' @handItem='handthis':item-style-active="{ 'font-size': '40rpx','font-weight': 'bold','color': 'red','border-bottom': '1px solid red'}" /></view><view>5.自定义 是否开启名字过长限制字数....<scrollEasy :list='categoryOther' exceed='5' isNameEllipsis :index='currindex' @handItem='handthis' /></view><view>6.自定义高度<scrollEasy debg='green' defH='180' :list='category' :index='currindex' @handItem='handthis' /></view>7.自定义布局<view class='combox'><view class="left"><scrollEasy :list='category' :index='currindex' @handItem='handthis' /></view><view class="right">站位部分</view></view><view style="display: flex;"><view v-for="(item,index) in category" :key="index" @click="addcurrindex(index)"><button style="flex: 1;">{{index}}</button></view></view></view>
</template><script>import scrollEasy from '../../components/scroll-easy.vue'export default {components: {scrollEasy},data() {return {currindex: 0,currindex1: 2,category: [{id: 1,name: '面试信息1'},{id: 2,name: '面试信息2'},{id: 3,name: '面试信息3'},{id: 4,name: '面试信息4'},{id: 6,name: '面试信息5'},{id: 7,name: '面试信息6'},{id: 81,name: '充值中心7'}, {id: 62,name: '火车司机8'},{id: 73,name: '销售专员9'},{id: 84,name: '娱乐主播10'}],categoryOther: [{id: 1,name: '面试信息1'},{id: 2,name: '面试信息水电费2'},{id: 3,name: '面试信息3'},{id: 4,name: '面试信息4'},{id: 6,name: '面试信息四大分卫二5'},{id: 7,name: '面试信息6'},{id: 81,name: '充值中心7'}, {id: 62,name: '火车司机8'},{id: 73,name: '销售专员9'},{id: 84,name: '娱乐主播10'}]}},methods: {addcurrindex(index) {this.currindex = index},handthis(item, index) {console.log(item)console.log(index)this.currindex = index}}}
</script><style lang="scss" scoped>.combox {width: 100%;display: flex;}.left {flex: 1;width: 0;}.right {min-width: 100px;width: 100rpx;background: greenyellow;text-align: center;line-height: 100rpx;}
</style>

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

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

相关文章

SpringBoot Maven快速上手

文章目录 一、Maven 1.1 Maven 简介&#xff1a;1.2 Maven 的核心功能&#xff1a; 1.2.1 项目构建&#xff1a;1.2.2 依赖管理&#xff1a; 1.3 Maven 仓库&#xff1a; 1.3.1 本地仓库&#xff1a;1.3.2 中央仓库&#xff1a;1.3.3 私服&#xff1a; 二、第一个 SpringBoot…

funcaptcha 验证码逆向协议通过,算法实现

声明 本文章中所有内容仅供学习交流&#xff0c;抓包内容、敏感网址、数据接口均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01;

【C语言】浮点数的原理、整型如何转换成浮点数

众所周知C语言中浮点数占四个字节&#xff0c;无论在32位或者64位机器上。不免会发出疑问四个字节是怎么计算出小数的呢&#xff1f;其实物理存放还是按照整型存放的。 IEEE 754 单精度浮点数格式 浮点数在计算机中是使用 IEEE 754 标准进行表示的。在 IEEE 754 标准中&#…

善于运用指针--函数与指针

文章目录 前言一、函数的指针二、函数指针运用 1函数名地址2指针变量调用函数3指向函数的指针变量做函数参数二、返回指针值的函数总结 前言 如果在程序中定义了一个函数&#xff0c;在编译时会把函数的源代码转换为可执行代码并分配一段空间。这段空间有一个起始地址&#xf…

美图撕掉蔡文胜标签

卖掉比特币的美图不投机了。 作者|周立青 编辑|杨舟 12月5日&#xff0c;比特币突破10万美元大关&#xff0c;曾花费1亿美元购入虚拟货币的美图宣布已出售所有加密货币。 美图在港交所发布公告称&#xff0c;自2024年11月起&#xff0c;公司已开始出售其持有的加密货币&…

图片底部空白缝隙解决法方案(CSS)

当我想实现一个垂直轮播图时&#xff0c;图片底部会出现一个空白缝隙导致切换轮播图片显示不完整。 这里可以用两个方法解决 一、给图片添加(垂直对齐)vertical-align:baseline|middle|top; vertical-align属性的值可以是 &#xff08;1&#xff09;关键字值:baseline|midd…

win11 恢复任务栏copilot图标, 亲测有效

1、修改C:\Windows\System32\IntegratedServicesRegionPolicySet.json&#xff0c;解除中国不能使用copilot的限制。 使用Notepad搜索copilot全文搜索&#xff0c;将下面两处的“CN,”删除&#xff0c;删除后如下&#xff1a; {"$comment": "Show Copilot on t…

计算机相关知识

前言 提醒&#xff1a; 文章内容为方便作者自己后日复习与查阅而进行的书写与发布&#xff0c;其中引用内容都会使用链接表明出处&#xff08;如有侵权问题&#xff0c;请及时联系&#xff09;。 其中内容多为一次书写&#xff0c;缺少检查与订正&#xff0c;如有问题或其他拓展…

鹦鹉的饮食偏好:探索多彩的食物世界

鹦鹉&#xff0c;作为聪明且迷人的鸟类&#xff0c;其饮食习性一直是鸟类爱好者关注的焦点。了解鹦鹉喜欢吃什么食物&#xff0c;对于确保它们的健康与幸福至关重要。 鹦鹉的食物种类丰富多样&#xff0c;首先是各类种子与谷物。例如&#xff0c;葵花籽富含脂肪和蛋白质&#…

2021 年 12 月青少年软编等考 C 语言四级真题解析

目录 T1. 移动路线思路分析T2. 移动办公思路分析T3. 最长公共子上升序列思路分析T4. 技能树思路分析T1. 移动路线 桌子上有一个 m m m 行 n n n 列的方格矩阵,将每个方格用坐标表示,行坐标从下到上依次递增,列坐标从左至右依次递增,左下角方格的坐标为 ( 1 , 1 ) (1,1)…

番外篇 | YOLO-ELA:高效的局部注意力建模,用于高性能实时缺陷检测 !

前言:Hello大家好,我是小哥谈。现有的从无人机(UAV)上进行的绝缘子缺陷识别方法在处理复杂背景场景和小型物体时,准确率较低且存在较多的假阳性检测。为解决这一问题,本文提出了一种基于局部注意力建模的新注意力基础架构,即YOLO-ELA。在YOLOv8的一阶段架构的Neck部分添…

自然语言处理和大语言模型综述(12.2-12.8)

目录 0 前言 1 NLP是什么 2 LLMs是什么 3 NLP和LLMs的发展 3.1 单词和句子向量 3.2 无监督预训练 3.3 预训练的Transformer 3.4 分布式训练的LLMs 4 NLP的应用 4.1 序列分类 4.2 两两序列分类 4.3 单词标注 4.4 Seq2Seq 5 LLMs的应用模型 5.1 GPT 5.2 BERT 5.…

【密码学】SM4算法

一、 SM4算法简介 SM4算法是中国国家密码管理局于2012发布的一种分组密码算法&#xff0c;其官方名称为SMS4&#xff08;SMS4.0&#xff09;&#xff0c;相关标准为GM/T 0002-2012《SM4分组密码算法》。SM4算法的分组长度和密钥长度均为128比特,采用非平衡Feistel结构。采用32…

【实现多网卡电脑的网络连接共享】

电脑A配备有两张网卡&#xff0c;分别命名为eth0和eth1&#xff08;对于拥有超过两张网卡的情况&#xff0c;解决方案相似&#xff09;。其中&#xff0c;eth0网卡能够连接到Internet&#xff0c;而eth1网卡则通过网线直接与另一台电脑B相连&#xff08;在实际应用中&#xff0…

VBA API 概述 | 宏编程

注&#xff1a;本文为 “VBA API 概述 | 宏编程 | 执行速度慢” 相关文章合辑。 VBA API 详解 Office 二次开发于 2020-12-17 22:27:10 发布 Office 版本变动 在 Office 2010 之前&#xff0c;微软仅提供 32-bit 版本的 Office。而自 Office 2010 起&#xff0c;出现了 32-b…

Node.js nvm(版本管理工具)

1. 介绍 nvm 全称 Node Version Manager 顾名思义它是用来管理 node 版本的工具&#xff0c;方便切换不同版本的 Node.js 2. 使用 nvm 的使用非常的简单&#xff0c;跟 npm 的使用方法类似 2.1 下载安装 首先先下载 nvm&#xff0c;下载地址 https://github.com/coreybutl…

Scala的隐式类,隐式参数和值,隐式对象

1.Scala的隐式类定义语法&#xff1a;implicit class 类名(参数){ } 隐式类中参数只能定义一个&#xff0c;参数中的源类型与目标类型一一对应&#xff0c;只能从一种类型转换成另一种类型&#xff0c;不可以一对多或多对。 //隐式类&#xff1a;implicit class隐式转换函…

科技潮头浪接天,一桥飞架两界连。EthernetIP转Profinet互译连

本案例介绍的是西门子1200PLC通过稳联技术PROFINET转EtherNetIP网关&#xff08;WL-ABC2006&#xff09;连接HCS-6100系统配置案例。 打开稳联技术Ethernetip转profient网关(WL-ABC2006)配置软件&#xff0c;因为网关作为EtherNetIP从站&#xff0c;所以选择PN2EIP。设置网关Pr…

EasyPlayer.js播放器如何在iOS上实现低延时直播?

随着流媒体技术的迅速发展&#xff0c;H5流媒体播放器已成为现代网络视频播放的重要工具。其中&#xff0c;EasyPlayer.js播放器作为一款功能强大的H5播放器&#xff0c;凭借其全面的协议支持、多种解码方式以及跨平台兼容性&#xff0c;赢得了广泛的关注和应用。 那么要在iOS上…

LeetCode - #158 用 Read4 读取 N 个字符 II

文章目录 摘要描述题目描述方法定义 题解答案题解代码题解代码分析示例测试及结果示例测试代码示例运行结果 时间复杂度空间复杂度总结关于我们 摘要 本文将详细解读一道与文件读取相关的编程问题&#xff1a;如何使用 read4 实现按需读取 n 个字符的 read 方法。我们不仅会提…