微信小程序点击分类跳到对应商品，滚动商品，对应详情选中,

猫清

于 2020-03-13 08:30:42 发布

阅读量1.9k

点赞数 1

分类专栏： webChat 笔记

本文链接：https://blog.youkuaiyun.com/hjiaqing/article/details/104833291

版权

这篇博客分享了如何在微信小程序中实现点击商品分类跳转到对应商品页面，并自动滚动到相应商品的详细信息，同时提供了相关代码示例和参考资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码，自己领悟吧，有不足这处请留言

wxml

<view class="detail_container">
    <!-- 返回按键 -->
  <x-back  class="back"/>
  <view class="topnav" hidden='{
  {hiddenTopNav}}'>
  <block wx:for="{
  {topNavArray}}" wx:key='topnav'>
    <view class="top-item">
    <text class="{
  {index==navActive?'active':''}}" bindtap='goToFloor' data-floor='f{
  {index}}' data-index='{
  {index}}'>{
  {item}}</text>
    </view>
  </block>
  </view>
  <scroll-view scroll-y="true" scroll-into-view="{
  {toView}}" scroll-with-animation="true" bindscroll="yScoll" style="height:{
  {scrollHeight}}rpx;">
  
  
    <!-- 商品图片播放 -->
  <view id="f0"  class="good_pic">
     <x-swiper bind:onTouchImg="onTouchImg"  swipers="{
  {good}}" swiper="swiper"/>
  </view>
  <!-- 商品信息 -->
  <view class="good_info item"> 
      <view class="x-goodInfo">
        <x-goodInfo good="{
  {good}}" bind:onLike="onLike" />
      </view>   
  </view>
  <!-- 评论 -->
  <view id="f1" class="good-comment good item