微信小程序之scroll-view

最新推荐文章于 2024-08-23 10:43:07 发布

pana hema

最新推荐文章于 2024-08-23 10:43:07 发布

阅读量255

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/chen_rui_heng_525/article/details/108842582

版权

本文介绍了如何在微信小程序中使用scroll-view组件实现点击左侧内容，右侧内容滚动到对应位置的功能。通过示例代码展示index.wxml和index.js的实现细节，并强调了scroll-view需设置高度以及如何在onLoad中获取可视区域高度的方法，同时提醒注意为每个右侧元素设置唯一id。

摘要由CSDN通过智能技术生成

scroll-view

最近在写一个微信小程序项目，其中有一个功能是点击左侧，右侧的内容会滚到对应的位置：
在这里插入图片描述

这个我用scroll-view组件来实现，具体代码如下

index.wxml

<scroll-view class="left" scroll-y="true" scroll-top="{
    {leftTop}}">
    <view bindtap="gunba" data-id="goods_{
    {index}}" id="content" class="left_list" wx:for="{
    {foodlist}}" wx:key="index">
        <view class="list">{
  {item.name}}