微信小程序ScrollView等组件高度自适应

对于微信小程序中的 `ScrollView` 组件，可以通过设置其宽高样式为 `100%` 来实现高度自适应。具体来说，可以将 `ScrollView` 的 `style` 属性设置为以下样式：

height: 100%;
width: 100%;

这样，`ScrollView` 组件的高度就会自适应父容器的高度，从而实现高度自适应的效果。

另外，如果需要在 `ScrollView` 组件中添加其他组件，可以将它们放在一个 `view` 容器中，并将该容器的高度设置为需要的高度，然后将该容器作为 `ScrollView` 的子组件即可。如下所示：

<scroll-view style="height: 100%; width: 100%;">
  <view style="height: 500rpx;">
    <!-- 其他组件 -->
  </view>
</scroll-view>

在上面的代码中，`view` 容器的高度被设置为 `500rpx`，而 `scroll-view` 组件的样式为 `height: 100%; width: 100%;`，这样就可以实现高度自适应的效果。

相关问题

css高度自适应屏幕_一招搞定微信小程序ScrollView等组件高度自适应

对于微信小程序中的ScrollView等组件高度自适应的问题，可以使用WXS（WeiXin Style Sheets）来解决。具体步骤如下：

1. 在WXML文件中定义一个view，用来包含ScrollView等组件，如下所示：

<view class="wrapper">
  <scroll-view class="content">
    ...
  </scroll-view>
</view>

2. 在WXSS文件中定义.wrapper类，设置其高度为100%：

.wrapper {
  height: 100%;
}

3. 在WXS文件中定义一个函数，用来获取屏幕高度，如下所示：

var systemInfo = wx.getSystemInfoSync();
var windowHeight = systemInfo.windowHeight;

module.exports = {
  windowHeight: windowHeight
}

4. 在WXSS文件中定义.content类，设置其高度为屏幕高度减去.wrapper类的高度：

@import "../utils/windowHeight.wxs";

.content {
  height: calc({{windowHeight}}px - 100%);
}

这样就可以实现ScrollView等组件高度自适应屏幕了。

微信小程序scrollview循环滚动

微信小程序中的scroll-view组件是用来实现滚动视图的，但默认情况下并不支持循环滚动。如果需要实现循环滚动，我们可以通过一些自定义的方式来实现。

实现循环滚动的基本思路是在scroll-view组件外面放置一个容器，并在容器中复制一份完整的内容，并且在容器的开始和结束处分别添加一份内容的副本。通过设置容器的宽度为原始内容的宽度加上一份内容的副本的宽度，来实现循环滚动的效果。

具体实现的步骤如下：
1. 在scroll-view组件外部添加一个容器，例如使用view组件包裹scroll-view组件。
2. 获取原始内容的宽度，可以使用小程序的API来获取元素的宽度，如wx.createSelectorQuery().select('#id').boundingClientRect()
3. 复制一份完整的内容，并在容器的开始和结束处分别添加一份内容的副本。
4. 设置容器的宽度为原始内容的宽度加上一份内容的副本的宽度。
5. 在scroll-view组件的bindscroll事件中，通过监听滚动的偏移量，当滚动偏移量超过容器的宽度时，将scroll-view的滚动到对应的位置，并且将滚动偏移量重置为0，实现循环滚动的效果。

需要注意的是，滚动的速度要快于内容的切换，否则会出现内容错乱的情况。同时，由于scroll-view组件在滚动到边缘时会有一定的滚动回弹效果，所以在滚动到容器的开始和结束处时会有一小段回弹效果，可以根据具体的需求进行调整和优化。

总结起来，通过在scroll-view组件外部添加一个容器，在容器中复制一份完整的内容并设置容器的宽度，以及通过监听滚动事件来实现滚动偏移量的调整，就可以实现微信小程序中scroll-view的循环滚动效果。