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 的自定义组件的影响。
相关推荐
阿珊和她的猫1 小时前
Vue Router中的路由嵌套：主子路由
前端·javascript·vue.js
霸王蟹2 小时前
React 19中如何向Vue那样自定义状态和方法暴露给父组件。
前端·javascript·学习·react.js·typescript
TE-茶叶蛋2 小时前
uniapp的适配方式
uni-app
shenyan~2 小时前
关于 js：9. Node.js 后端相关
前端·javascript·node.js
lqj_本人2 小时前
鸿蒙OS&UniApp 制作自定义弹窗与模态框组件#三方框架 #Uniapp
uni-app
进取星辰3 小时前
31、魔法生物图鉴——React 19 Web Workers
开发语言·javascript·ecmascript
HSunR4 小时前
vue3 elementplus tabs切换实现
javascript·vue.js·elementui
搏博4 小时前
WPS中代码段的识别方法及JS宏实现
开发语言·javascript·wps
三天不学习5 小时前
VueUse/Core：提升Vue开发效率的实用工具库
前端·javascript·vue.js·vueuse
好青崧5 小时前
等于和绝对等于的区别
javascript
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU06Coze扣子平台完整体验和实践（附国内和国际版对比）07Ubuntu24.04安装中文输入法08DeepSeek各版本说明与优缺点分析09苍穹外卖面试总结10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）