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

程楠楠&M2024-09-23 11:51

uni-app项目中遇到的功能

文章目录

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

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 功能代码

cpp 复制代码 
<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组件用法的简介

cpp 复制代码 
<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属性设置
属性 类型 默认值 描述 平台兼容
multipleSlots Boolean true 在组件定义时的选项中启动多slot支持
styleIsolation String apply-shared 组件样式隔离方式， 微信小程序
addGlobalClass Boolean true 这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效 微信小程序
virtualHost Boolean true 将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定，启用后可以通过 mergeVirtualHostAttributes 合并合并组件虚拟节点外层属性 微信小程序、支付宝小程序（默认值为 true）、抖音小程序（4.02+）
cpp 复制代码 
// js需要设置, 否则h5生效，小程序不生效
<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
	}
</script>
  1. 组件样式隔离
    默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：
  • 指定特殊的样式隔离选项 styleIsolation 。
  • webview 渲染下，在 app.wxss 或页面的 wxss 中使用标签名选择器（或一些其他特殊选择器）来直接指定样式会影响到页面和全部组件。通常情况下这是不推荐的做法。
cpp 复制代码 
{
  "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 的自定义组件的影响。
相关推荐
沐爸muba22 分钟前
JS中的for...in和for...of有什么区别？
前端·javascript
桃花加酥26 分钟前
js笔记（二进制由0和1两个数字组成）
java·javascript
慕仲卿1 小时前
为什么要使用补码表示负数
javascript
集成显卡1 小时前
快来用 Rspack/Rsbuild + pnpm 构建你的 monorepo 全栈项目
javascript·webpack·rust
程序员大金1 小时前
基于SpringBoot+Vue+MySQL的校园一卡通系统
java·javascript·vue.js·spring boot·后端·mysql·tomcat
m0_528723812 小时前
vue2与vue3的区别
前端·javascript·vue.js
J不A秃V头A2 小时前
el-table使用el-switch选择器没效果
javascript·vue.js·elementui
huangfuyk2 小时前
Vue3+Element Plus：使用el-dialog，对话框可拖动，且对话框弹出时仍然能够在背景页（对话框外部的页面部分）上进行滚动以及输入框输入信息
前端·javascript·vue.js·vue 3
突然好热2 小时前
cesium效果不酷炫怎么办--增加渲染器
开发语言·前端·javascript
码农研究僧3 小时前
uniapp出现 下拉框等组件被遮挡 的分析
uni-app·bug·下拉框·被遮挡
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05CCF-CSP认证考试 202406-3 文本分词 100分题解06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07【SCS-CN】SCS-CN模型中CN值的确定08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10【极空间NAS】使用WebDAV服务 + DDNSTO内网穿透 实现思源笔记的内外网同步