微信小程序实现商城分类,点击左侧滚动到相应区域,滚动右侧高亮左侧导航(scroll-view)

前端榴脆骨

已于 2024-01-17 15:20:53 修改

阅读量1.1k

点赞数 10

文章标签：微信小程序小程序

于 2024-01-17 14:34:46 首次发布

本文链接：https://blog.csdn.net/lllcuigu/article/details/135649779

版权


<view>
  <view class="cateBox">
    <!-- 左侧列表 -->
    <scroll-view class="cate-left" scroll-y="true" :scroll-top="verticalNavTop" scroll-with-animation>
      <view class="cate-left-list" wx:for="{
  {shopList}}" wx:key="index" bindtap="tapselect" data-index="{
  {index}}">
        <view class="{
  {currentTab==index ? 'activeItem':'cate-left-item'}} " >
          <label></label><text>{
  {item.navtitle}}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 右侧列表 -->
    <scroll-view class="cate-right" style="height: 100vh;" scroll-y="true" bindscroll="mainScroll" scroll-into-view="cate-{
  {mainCur}}"
      scroll-with-animation>
      <view wx:for="{
  {shopList}}" wx:key="index" id="cate-{
  {index}}">
        <view class="cate-right-title">
          <view class="line"></view>
          <text>{
  {item.navtitle}}</text>
        </view>
        <view class="cate-right-list">
          <view class="cate-right-item" wx:for="{
  {item.shop}}" wx:key="childindex" wx:for-item="child"
            bindtap="getShop" data-child="{
  {child}}">
            <image src="{
  {child.shopimage}}" mode=""></image>
            <text>{
  {child.shoptitle}}</text>
          </view>
        </view>
      </view>
      <view style="height: 100px;"></view>
    </scroll-view>
  </view>

</view>


Page({

    data: {
     
        shopList:[
          {
            navtitle: '分类1',
            shop: [{
                    shoptitle: "轮胎1",
                    shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
                },
                {
                    shoptitle: