小程序组件scroll-view基本使用

最新推荐文章于 2024-04-16 22:28:40 发布

曾泳锋

最新推荐文章于 2024-04-16 22:28:40 发布

阅读量188

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_44795287/article/details/112339548

版权

小程序专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文详细介绍了小程序中scroll-view组件的基本使用，强调了在实现滚动功能时设置固定高度的重要性，帮助开发者更好地理解和运用这一组件。

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

记住滚动得设置固定高度

<view class="tab">
      <scroll-view scroll-y class="scroll_left">
        <view v-for="(item,index) in cateNum" :key="item.id" class="left_item" @tap="tab(index)" :class="{active:index===cateIndex}">
          <text>{{ item.cat_name }}</text>
        </view>
      </scroll-view>
      <scroll-view scroll-y class="scroll_right">
        <view v-for="(item, index) in cateRight" :key="index" class="Right_list">
          <view v-for="item2 in item" :key="item2.cat_name">
            <view v-if="cateIndex===index" class="item">
              <view class="item_title" >
                <text class="item_title_item">{{item2.cat_name}}</text>
              </view>
              <view class="item_image">
                <navigator v-for="item3 in item2.children" :key="item3.cat_name"  hover-class="none" class="I" :url="`/pages/goods_list/main?id=${item3.cat_pid}`">
                <image :src="item3.cat_icon" mode="aspectFit" class="item_n_image" lazy-load></image>
                <text>{{item3.cat_name}}</text>
              </navigator>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>