uni-app功能 1. 实现点击置顶，滚动吸顶2.swiper一个轮播显示一个半内容且实现无缝滚动3.穿透修改uni-ui的样式

news2024/11/13 9:27:29

uni-app项目中遇到的功能

文章目录

  • uni-app项目中遇到的功能
  • 一、实现点击置顶，滚动吸顶、
    • 1.1、scroll-view设置不生效的原因和解决办法
    • 1.2 功能代码
  • 二、swiper一个轮播显示一个半内容且实现无缝滚动
  • 三、穿透修改uni-ui的样式

一、实现点击置顶，滚动吸顶、

1.1、scroll-view设置不生效的原因和解决办法

  1. 数据是否准确：scroll-into-view属性指定的id不存在或不可见
    • 如果scroll-into-view属性指定的id在页面中不存在，或者该id所在的区域不可见，那么该属性将会失效。您需要确保该id存在于页面中，并且可见。
    • id的值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
  2. 生命周期问题：页面没有完全渲染完成
    如果页面没有完全渲染完成，而代码中已经调用了scroll-into-view属性，那么该属性将会失效。您可以将scroll-into-view的设置放在页面渲染完成的回调函数中，以确保该属性生效。
  3. croll-into-view属性的值被重复设置
    如果scroll-into-view属性的值在多个地方被设置，那么它可能会失效。在这种情况下，您需要确保scroll-into-view属性只在一个地方进行设置，并且确保该属性的值唯一。
  4. scroll-view组件的高度设置不正确
    如果scroll-view组件的高度设置不正确或者没有设置高度，那么scroll-into-view属性可能会失效。您可以通过设置scroll-view组件的高度为固定值或通过wx.getSystemInfoSync()获取屏幕高度来解决该问题。
  5. 异步加载问题：如果 scroll-view 或子元素是在异步加载数据后添加到页面的，确保在数据加载完成后设置 scroll-into-view 属性。可以使用异步settimeout或者nextTick

1.2 功能代码

<template>  
    <view class="content">  
        <scroll-view scroll-y="true" class="scroll-view"  :scroll-into-view="tracingLeftPoint">  
            <view>  
              <view class="body1">
                  我是内容 1 
              </view>  
				<view class="header" id="header1" @click="handleScoll('header1')">
					我是固定标题 1 
				</view> 
				<view class="body1">
				    我是内容 2
				</view> 
				<view class="body1">
				    我是内容 3 
				</view>  
				<view class="body1">
				    我是内容 4
				</view>  
				<view class="body1">
				    我是内容 5
				</view>  
				<!-- <view class="header" id="header2" @click="handleScoll('header2')">
					我是固定标题  2
				</view> -->
				<view class="body1">
				    我是内容 6
				</view>  
				<view class="body1">
				    我是内容 7
				</view> 
				<!-- <view class="header" id="header3" @click="handleScoll('header3')">
				 	我是固定标题  9
				 </view> -->
            </view>  
        </scroll-view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
				scrollH: 0,
				tracingLeftPoint:"",//描点id
            };  
        },  
        onLoad() {},  
        methods: {
			handleScoll(id) {
				 setTimeout(()=>{
					this.tracingLeftPoint= id
				},200)
			}
			
		}  
    };  
</script>  
<style lang="scss" scoped>  
    .scroll-view {  
        height: 100vw;  
        /* overflow-y: auto; */  
        position: relative;  
        color: #fff;  
        text-align: center;  

        .header {  
            background-color: red;  
            height: 80rpx;  
            line-height: 80rpx;  
            position: sticky;  
            top: 0rpx;  
        }  
		.body1 {
			background-color: green;
			height: 20vh;  
		}
        .body2 {  
           background-color: green;
           height: 200vh;  
        }  

        .line {  
            position: absolute;  
            top: 0;  
            height: 100%;  
            background-color: royalblue;  
            z-index: 2;  
        }  
    }  
</style>

初始状态
点击固定标题置顶滚动，固定标题仍然置顶

二、swiper一个轮播显示一个半内容且实现无缝滚动

uni-app中的scroll-view和swiper组件用法的简介

<template>
	<view>
		<scroll-view class="homePageSearch" :scroll-y="true" :scroll-with-animation="true">
			<view class="tool-version">
			  <swiper class="tool-version-swiper" circular="true" loop="true" autoplay="true"  interval="5000" duration="1000">
				<swiper-item class="tool-version-swiper-item swiper-item1"v-for="(item,index) in 6" :key="index">
				  <view class="tool-version-item">
					<view class="tool-version-item-white">
						<view class="baseBox">
							<text class="searchHistoryTitle">话题榜</text>
						</view>
						<view class="carListSwiper">
							<view class="baseYBox carListItem" v-for="(i, k) in 10" :key="k+100">
								<view class="carIndex">
									<cover-image v-if="k+1 == 1" class="imgIcon" src="../../static/image/guan.png" />
									<cover-image v-else-if="k+1 == 2" class="imgIcon" src="../../static/image/ya.png" />
									<cover-image v-else-if="k+1 == 3" class="imgIcon" src="../../static/image/ji.png" />
									<text class="minFont" v-else>{{k+1}}</text>
								</view>
								<cover-image class="carImageMini" src="/static/logo.png"></cover-image>
								<view class="carTitle">理想ONE 2021款 增程6座...</view>
							</view>
						</view>
					</view>
				  </view>
				</swiper-item>
			  </swiper>
			</view>
		</scroll-view>
	</view>
	
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
	}
</script>

<style lang="scss" scoped>
.homePageSearch {
	padding: 0 12px;
	box-sizing: border-box;
	background-color: #F6F6F6;
}
.searchHistoryTitle {
	color: #333333;
	font-weight: bold;
	font-size: 16px;
}

.love {
	 margin-left: 5px;
}
.carTitle {
	color: rgba(51, 51, 51, 1);
	font-size: 12px;
	font-weight: Bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.baseYBox {
	display: flex;
	align-items: center;
}
.tool-version-swiper {
  width: 100% !important;
  height: 900rpx;
}
.tool-version-swiper-item {
  width: 493rpx !important;
  padding: 0 32rpx 0 0;
}
 .carListSwiper {
	 margin-top: 18px;
 }
.tool-version-item-white {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0 8rpx 43rpx 0 rgba(17, 72, 129, 0.06);
  padding: 12px 12px 8px 8px ;
  box-sizing: border-box;
 border-radius: 5px;
}
.carImageMini {
	width: 40px;
	height: 30px;
	border-radius: 2px 2px 2px 2px;
	margin-right: 10px;
}
.carIndex {
	width: 20px;
	text-align: center;
}
.carListItem {
	margin-bottom: 10px;
}
</style>

代码执行效果

三、穿透修改uni-ui的样式

在uni-app中，想要修改uni-ui组件的样式，可以通过以下几种方式实现：

  1. 在组件上使用class或者style直接覆盖默认样式。
  2. 使用Css预处理器（如Sass/Less）修改源码中的变量。
  3. 使用/deep/或::v-deep选择器来穿透组件边界修改子组件样式。
    注意：由于uni-app的编译限制，你可能需要使用/deep/或::v-deep来穿透样式，但这在非Web组件中可能不适用。
  • Vue 组件编译到小程序平台的时候会编译为对应平台的组件，部分小程序平台支持 options 选项（具体选项参考对应小程序平台文档的自定义组件部分），一般情况默认即可，如有特殊需求可在 Vue 组件中增加 options 属性。
    options属性设置
属性类型默认值描述平台兼容
multipleSlotsBooleantrue在组件定义时的选项中启动多slot支持
styleIsolationStringapply-shared组件样式隔离方式，微信小程序
addGlobalClassBooleantrue这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效微信小程序
virtualHostBooleantrue将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定，启用后可以通过 mergeVirtualHostAttributes 合并合并组件虚拟节点外层属性微信小程序、支付宝小程序（默认值为 true）、抖音小程序（4.02+）
// js需要设置, 否则h5生效，小程序不生效
<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
	}
</script>
  1. 组件样式隔离
    默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：
  • 指定特殊的样式隔离选项 styleIsolation 。
  • webview 渲染下，在 app.wxss 或页面的 wxss 中使用标签名选择器（或一些其他特殊选择器）来直接指定样式会影响到页面和全部组件。通常情况下这是不推荐的做法。
{
  "styleIsolation": "isolated"
}

支持以下取值：

  • isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
  • apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
  • shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
    使用后两者时，请务必注意组件间样式的相互影响。
    如果这个 Component 构造器用于构造页面 ，则默认值为 shared ，且还有以下几个额外的样式隔离选项可用：
  • page-isolated 表示在这个页面禁用 app.wxss ，同时，页面的 wxss 不会影响到其他自定义组件；
  • page-apply-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式不会影响到其他自定义组件，但设为 shared 的自定义组件会影响到页面；
  • page-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

PMP--二模--解题--1-10

PMP--二模--解题--1-10

文章目录 4.整合管理--商业文件--商业论证&#xff08;是否值得所需投资、高管们决策的依据&#xff09;反映了&#xff1a;1、 [单选] 收到新项目的客户请求之后&#xff0c;项目经理首先应该做什么&#xff1f; 14.敏捷--角色--产品负责人PO–职责–1.创建待办列表并排序;2.确…
阅读更多...
EmguCV学习笔记 VB.Net 12.3 OCR

EmguCV学习笔记 VB.Net 12.3 OCR

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…
阅读更多...
MATLAB给一段数据加宽频噪声的方法（随机噪声+带通滤波器）

MATLAB给一段数据加宽频噪声的方法（随机噪声+带通滤波器）

文章目录 引言方法概述完整代码：结果分析结论参考文献引言 在信号处理领域，添加噪声是模拟实际环境中信号传输时常见的操作。宽频噪声可以用于测试系统的鲁棒性和信号处理算法的有效性。本文将介绍如何使用 M A T L A B MATLAB MATLAB给一段数据添加宽频噪声，具体方法是结合…
阅读更多...
漏洞挖掘 | Selenium Grid 中的 SSRF

漏洞挖掘 | Selenium Grid 中的 SSRF

Selenium 网格框架上的基本服务器端请求伪造 最近&#xff0c;我正在阅读漏洞文章看到Peter Jaric写的一篇 Selenium Grid 文章&#xff1b;他解释了 Selenium Grid 框架上缺乏身份验证和安全措施强化的问题。 在网上进行了更多搜索&#xff0c;我发现 Selenium Grid 开箱即用…
阅读更多...
古诗词四首鉴赏

古诗词四首鉴赏

1、出自蓟北门行 唐李白 虏阵横北荒&#xff0c;胡星曜精芒。 羽书速惊电&#xff0c;烽火昼连光。 虎竹救边急&#xff0c;戎车森已行。 明主不安席&#xff0c;按剑心飞扬。 推毂出猛将&#xff0c;连旗登战场。 兵威冲绝漠&#xff0c;杀气凌穹苍。…
阅读更多...
打开C嘎嘎的大门：你好，C嘎嘎！（1）

打开C嘎嘎的大门：你好，C嘎嘎！（1）

前言&#xff1a; 小编在学习完一些数据结构以后&#xff0c;终于&#xff0c;我还是来到了这一步&#xff0c;开始学习我小学就听说过的C&#xff0c;至于为什么标题写的C嘎嘎&#xff0c;因为小编觉着这样好念而且有意思&#xff0c;今天是小编学习C嘎嘎的第一天&#xff0c;…
阅读更多...
零信任安全架构--最小权限原则

零信任安全架构--最小权限原则

最小权限原则&#xff08;Principle of Least Privilege, PoLP&#xff09;是零信任安全架构中的核心理念之一&#xff0c;旨在确保用户、设备、应用等系统实体只拥有完成其任务所必需的最低权限&#xff0c;避免不必要的权限扩展&#xff0c;从而降低安全风险。 1. 概念 最小…
阅读更多...
LabVIEW闪退

LabVIEW闪退

LabVIEW闪退或无法启动可能由多个原因引起&#xff0c;特别是在使用了一段时间后突然发生的问题。重启电脑后 LabVIEW 和所有 NI 软件都无法打开&#xff0c;甚至在卸载和重装时也没有反应。这种情况通常与系统环境、软件冲突或 NI 软件组件的损坏有关。 1. 检查系统和软件冲突…
阅读更多...
Arthas dashboard（当前系统的实时数据面板）

Arthas dashboard（当前系统的实时数据面板）

文章目录 二、命令列表2.1 jvm相关命令2.1.1 dashboard&#xff08;当前系统的实时数据面板&#xff09; 二、命令列表 2.1 jvm相关命令 2.1.1 dashboard&#xff08;当前系统的实时数据面板&#xff09; 使用场景&#xff1a; 在 Arthas 中&#xff0c;dashboard 命令用于提…
阅读更多...
echarts实现地图下钻并解决海南群岛显示缩略图

echarts实现地图下钻并解决海南群岛显示缩略图

一、准备工作 1、echarts版本&#xff1a; ^5.5.1 2、去掉海南数据的json文件 二、获取删除过后的json文件 1、DataV.GeoAtlas地理小工具系列 (aliyun.com) 在网站输入这个复制的&#xff0c;新建一个json文件粘贴进去。 接下来需要删除两个地方&#xff0c;不要删错&…
阅读更多...
前端vue-关于标签切换的实现

前端vue-关于标签切换的实现

首先是循环&#xff0c;使用v-for“&#xff08;item,index) in list” :key“item.id” 然后当点击哪个的时候再切换&#xff0c;使用v-bind:class" "或者是:class" ",如果都是用active的话&#xff0c;那么每一个标签都是被选中的状态&#xff0c;…
阅读更多...
[C高手编程] C语言宏、内置宏与预处理：深入理解与应用

[C高手编程] C语言宏、内置宏与预处理：深入理解与应用

&#x1f496;&#x1f496;⚡️⚡️专栏&#xff1a;C高手编程-面试宝典/技术手册/高手进阶⚡️⚡️&#x1f496;&#x1f496; 「C高手编程」专栏融合了作者十多年的C语言开发经验&#xff0c;汇集了从基础到进阶的关键知识点&#xff0c;是不可多得的知识宝典。如果你是即将…
阅读更多...
TypeScript异常处理

TypeScript异常处理

1.异常的概念 程序运行中意外发生的情况就成为异常 例子&#xff1a; //除法运算function chu(num1:number,num2:number){if(num20){//throw 抛出异常throw new Error(除数不能为零)}let num:numbernum1/num2console.log(num) }//程序出现异常后会停止运行// 捕获异常try{ /…
阅读更多...
《黑神话悟空》开发框架与战斗系统解析

《黑神话悟空》开发框架与战斗系统解析

本文主要围绕《黑神话悟空》的开发框架与战斗系统解析展开 主要内容 《黑神话悟空》采用的技术栈 《黑神话悟空》战斗系统的实现方式 四种攻击模式 连招系统的创建 如何实现高扩展性的战斗系统 包括角色属性系统、技能配置文件和逻辑节点的抽象等关键技术点 版权声明 本…
阅读更多...
【他山之石】Humanize AI 简介

【他山之石】Humanize AI 简介

Humanize AI 简介 Humanize AI 官方首页截图 文章目录 Humanize AI 简介1 Humanize AI 是什么2 Humanize AI 能做什么3 Humanize AI 怎么用4 Humanize AI 怎么收费5 结论 1 Humanize AI 是什么 数字时代的当下&#xff0c;AI 人工智能已成为内容创作不可或缺的一部分。从生成文…
阅读更多...
poi-tl的详细教程(动态表格、单元格合并)

poi-tl的详细教程(动态表格、单元格合并)

前提了解poi-tl 链接: springboot整合poi-tl 创建word模板 实现效果 代码实现 ServerTableData import com.deepoove.poi.data.RowRenderData;import java.util.List;public class ServerTableData {/*** 携带表格中真实数据*/private List<RowRenderData> serverDat…
阅读更多...
【Python常用模块】_PyMySQL模块详解

【Python常用模块】_PyMySQL模块详解

课 程 推 荐我 的 个 人 主 页：👉👉 失心疯的个人主页 👈👈入 门 教 程 推 荐 ：👉👉 Python零基础入门教程合集 👈👈虚 拟 环 境 搭 建 ：👉👉 Python项目虚拟环境(超详细讲解) 👈👈PyQt5 系 列 教 程：👉👉 Python GUI(PyQt5)教程合集 👈👈…
阅读更多...
window.open()地址栏隐藏问题解决方案

window.open()地址栏隐藏问题解决方案

问题 使用window.open打开一个页面时&#xff0c;想要隐藏地址栏&#xff0c;但是无效。 window.open (test.html,newwindow,height100,width400,top0,left0,toolbarno,menubarno,scrollbarsno, resizableno,locationno, statusno)由于浏览器区别和安全问题&#xff0c;浏览器…
阅读更多...
最新动态一致的文生视频大模型FancyVideo部署

最新动态一致的文生视频大模型FancyVideo部署

FancyVideo是一个由360AI团队和中山大学联合开发并开源的视频生成模型。 FancyVideo的创新之处在于它能够实现帧特定的文本指导&#xff0c;使得生成的视频既动态又具有一致性。 FancyVideo模型通过精心设计的跨帧文本引导模块&#xff08;Cross-frame Textual Guidance Modu…
阅读更多...
数据结构里的栈和队列

数据结构里的栈和队列

栈的笑话 程序员A对程序员B说&#xff1a;“你知道为什么程序员喜欢栈吗&#xff1f;” 程序员B疑惑地问&#xff1a;“为什么&#xff1f;” 程序员A回答&#xff1a;“因为它没有bug&#xff08;bug的谐音在英语中也是‘虫子’的意思&#xff0c;而栈的英文是stack&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023