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

<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属性设置

属性	类型	默认值	描述	平台兼容
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+）

// 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 的自定义组件的影响。