uni-app功能 1. 实现点击置顶，滚动吸顶2.swiper一个轮播显示一个半内容且实现无缝滚动3.穿透修改uni-ui的样式
uni-app项目中遇到的功能
文章目录
- uni-app项目中遇到的功能
- 一、实现点击置顶，滚动吸顶、
- 1.1、scroll-view设置不生效的原因和解决办法
- 1.2 功能代码
- 二、swiper一个轮播显示一个半内容且实现无缝滚动
- 三、穿透修改uni-ui的样式
一、实现点击置顶，滚动吸顶、
1.1、scroll-view设置不生效的原因和解决办法
- 数据是否准确：scroll-into-view属性指定的id不存在或不可见
- 如果scroll-into-view属性指定的id在页面中不存在，或者该id所在的区域不可见，那么该属性将会失效。您需要确保该id存在于页面中，并且可见。
- id的值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
- 生命周期问题：页面没有完全渲染完成
如果页面没有完全渲染完成，而代码中已经调用了scroll-into-view属性，那么该属性将会失效。您可以将scroll-into-view的设置放在页面渲染完成的回调函数中，以确保该属性生效。 - croll-into-view属性的值被重复设置
如果scroll-into-view属性的值在多个地方被设置，那么它可能会失效。在这种情况下，您需要确保scroll-into-view属性只在一个地方进行设置，并且确保该属性的值唯一。 - scroll-view组件的高度设置不正确
如果scroll-view组件的高度设置不正确或者没有设置高度，那么scroll-into-view属性可能会失效。您可以通过设置scroll-view组件的高度为固定值或通过wx.getSystemInfoSync()获取屏幕高度来解决该问题。 - 异步加载问题：如果 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组件的样式，可以通过以下几种方式实现：
- 在组件上使用class或者style直接覆盖默认样式。
- 使用Css预处理器（如Sass/Less）修改源码中的变量。
- 使用/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 | 微信小程序 | |
| virtualHost | Boolean | true | 将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定，启用后可以通过 mergeVirtualHostAttributes 合并合并组件虚拟节点外层属性 | 微信小程序、支付宝小程序（默认值为 true）、抖音小程序（4.02+） |
// js需要设置, 否则h5生效，小程序不生效
<script>
export default {
options: {
styleIsolation: 'shared'
},
}
</script>
- 组件样式隔离
默认情况下，自定义组件的样式只受到自定义组件 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 的自定义组件的影响。