小程序scroll-view实现锚点跳转

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

空空的瓶子酱

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

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/eva_feng/article/details/105060050

版权

本文介绍了如何在微信小程序中利用scroll-view组件，结合scroll-into-view属性实现长页面的锚点跳转，提供了相关的wxml、wxss和js代码示例。

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

在微信小程序中，使用 scroll-view 实现长页面的锚点跳转。主要是使用 scroll-into-view属性，在这里做个记录。
wxml

<view class="tab-section" >
    <view class="{
   {activeView =='productBox' ? 'active':''}}" bindtap="toViewClick" data-toview="productBox">商品</view>
    <view class="{
   {activeView =='infoBox' ? 'active':''}}" bindtap="toViewClick" data-toview="infoBox">详情</view>
    <view class="{
   {activeView =='commentBox' ? 'active':''}}" bindtap="toViewClick" data-toview="commentBox">评价</view>
  </view>

  <scroll-view class="good-wrap" 
  style="height:{
   {winHeight}}"
  scroll-into-view="{
   {toView}}"
  scroll-y="true" 
  scroll-with-animation="true" 
  bindscroll="pageScroll">
    <!-- 商品 -->
    <view id="productBox" class="content img-section">
      商品内容
    </view>
    <!-- 详情 -->
    <view id="infoBox" class="content detail-section">
      详情内容
    </view>
    <!-- 评价 -->
    <view id="commentBox" class="content evaluate-section">
      评价内容
    </view