微信小程序侧边栏左右联动--亲测好用

最新推荐文章于 2024-05-09 16:29:33 发布
最新推荐文章于 2024-05-09 16:29:33 发布
阅读量3.2k 收藏 32
点赞数 8
分类专栏： 技术分享 文章标签： 小程序 侧边栏 JS 微信小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq810646038/article/details/94000682
版权

本人新手，最近在做小程序的时候，遇到这么个需求。参考站内大神的方法，要么看不懂，要么有BUG，最终结合大神们的做法，好歹实现了功能，暂时没有遇到BUG。
主要参考：https://blog.csdn.net/qq_37870901/article/details/83269608

完成的界面如下：
在这里插入图片描述
说一下主要的修改：
1.关于页面高度，获取屏幕的高度，动态改变height即可
在这里插入图片描述
在这里插入图片描述
2.关于联动不吻合的bug，尝试了很久，发现之所以有这个bug，是因为设备不同，px显示的也是不同，根据测试，和屏幕的宽度有关？？也不知道为什么。最终采用 wx.createSelectorQuery()方法直接获取view的高度。在这里插入图片描述
view选的是右边内容的所有每一块，获取到的数组为每一块的高度（不是长度）
比如0–500—1000—1300，这里500、1000、1300是高度，500-0、1000-500、1300-1000才是长度
在这里插入图片描述
我本想直接用高度来判断联动，奈何水平有限，尝试了N个方法都没有成功，索性还是改成参考的方法，用长度在这里插入图片描述
最后就是修改参考的方法，成功实现联动
在这里插入图片描述
3.还有些小bug，比如加载完页面点击的第一个无效，所以在onLoad函数中直接获取长度，此处06就是item的个数在这里插入图片描述
还有就是点击左边会造成右边显示不正确，在点击左边事件中添加如下在这里插入图片描述
最后放上代码，图片随意加个试试看吧
wxml

<view class='main'>
  <view class='left'>
    <scroll-view scroll-y="true" style="height: {{screenHeight}}px" scroll-into-view="true" scroll-with-animation="true">
      <block wx:for="{{leftText}}" wx:for-list="item">
        <view class="{{classfiySelect == item.id?'active':'default'}}" data-id='{{item.id}}' bindtap='left_list'>
          <image src='{{item.img_url}}'></image>
          <text>{{item.text1}}</text>
        </view>
      </block>
    </scroll-view>
  </view>
  <view class='right'>
    <scroll-view scroll-y="true" style="height: {{screenHeight}}px" bindscroll="scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{'inToview'+rigId}}" scroll-with-animation="true">
      <block wx:for="{{rightData}}" wx:for-list="item">
      <view class="listHeight">
        <view class='itemTitle' id="{{'inToview'+item.id}}">{{item.title}}</view>

        <view class='listItem' data-id='{{item.id}}'>
          <block wx:for="{{item.frist}}">

            <view class='img'>
              <image src='{{item.url}}' mode="widthFix"></image>
            </view>
            <view class='listText'>
              <text>{{item.text}}</text>
            </view>
          </block>
        </view>
      </view>
      </block>
    </scroll-view>
   
  </view>
</view>

wxss

.active{
  color: rgb(255, 0, 0);
  opacity: 0.7;
  text-shadow: 2rpx 2rpx 2rpx rgb(160, 42, 42);
}
.default{
  color: rgb(173, 173, 173);
}
.main{
  display: flex;
}
.left{
  font-size: 30rpx;
  width: 20%;
  background-color: rgb(79, 77, 83);
  position: fixed;
}
.left view{
  padding-top: 30rpx;
  text-align: center;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.left image{
  width: 50rpx;
  height: 50rpx;
}
.right{
  position: absolute;
  right: 0;
  width: 80%;
}
 
.listItem .img{
  width: 100%;
  text-align: center;
  padding-top: 10rpx;
}
.listItem .img image{
  width: 100%;
}
.itemTitle{
  font-size: 50rpx;
  font-weight: bold;
  padding-left: 20rpx;
  padding-top: 20rpx;
  color:rgb(28, 0, 41);
}

::-webkit-scrollbar
{
width: 6px;
height: 6px;
background-color: #ffffff;
} 
::-webkit-scrollbar-track{
  height: 20rpx;
  color: black;
}

JS

Page({
  data: {
    heightArr: 0,
    classfiySelect: "",
    leftText: [{
      id: "01",
      text1: "标题1",
      img_url: "/images/icon.png",
    },
    {
      id: "02",
      text1: "标题2",
      img_url: "/images/icon.png",
    },
    {
      id: "03",
      text1: "标题3",
      img_url: "/images/icon.png",
    },
    {
      id: "04",
      text1: "标题4",
      img_url: "/images/icon.png",
    },
    {
      id: "05",
      text1: "标题5",
      img_url: "/images/icon.png",
    },
    {
      id: "06",
      text1: "标题6",
      img_url: "/images/icon.png",
    },

    ],
    rightData: [{
      id: "01",
      title: "内容1",
      frist: [{
        url: "/images/demo1.jpg",
        text: "文字说明1",
      },
      {
        url: "/images/demo2.jpg",
        text: "文字说明2",
      },

      ],
    },
    {
      id: "02",
      title: "内容2",
      frist: [{
        url: "/images/demo1.jpg",
        text: "文字说明1",
      },


      ],
    },
    {
      id: "03",
      title: "内容3",
      frist: [{
        url: "/images/demo1.jpg",
        text: "文字说明1",
      },
      {
        url: "/images/demo2.jpg",
        text: "文字说明2",
      },

      ],
    },
    {
      id: "04",
      title: "内容4",
      frist: [{
        url: "/images/demo1.jpg",
        text: "文字说明1",
      },
      {
        url: "/images/demo2.jpg",
        text: "文字说明2",
      },

      ],
    },
    {
      id: "05",
      title: "内容5",
      frist: [{
        url: "/images/demo1.jpg",
        text: "文字说明1",
      },
      {
        url: "/images/demo2.jpg",
        text: "文字说明2",
      },

      ],
    },
    {
      id: "06",
      title: "内容6",
      frist: [{
        url: "/images/demo1.jpg",
        text: "文字说明1",
      },
      {
        url: "/images/demo2.jpg",
        text: "文字说明2",
      },
      {
        url: "/images/demo2.jpg",
        text: "文字说明3",
      },

      ],
    },
    ],
  },

  onLoad: function (options) {
    var sysInfo = wx.getSystemInfoSync();
    this.setData({
      classfiySelect: this.data.leftText[0].id,
      screenHeight: sysInfo.windowHeight
    })

    this.length('06')

  },


  //滚动触发
  scroll: function (e) {
    var scrollTop = e.detail.scrollTop,
        h = 0,
        classfiySelect;
    var that = this;

    that.data.leftText.forEach(function (clssfiy, i) {
      var _h = that.length(clssfiy['id']);

      if (scrollTop >= h) {
        classfiySelect = clssfiy['id'];
      }
      h += _h;
      console.log("滚动高度：", scrollTop);
      console.log("高度差：", that.data.heightArr)
    })
    that.setData({
      classfiySelect: classfiySelect,
    })
  },
  //求每一栏高度
  length: function (e) {
    var query = wx.createSelectorQuery();
    //选择id
    var that = this;
    var rightData = that.data.rightData;
    var heightArr = [];
    for (var i = 0; i < rightData.length; i++) {
      if (rightData[i]['id'] == e) {
        query.selectAll('.listHeight').boundingClientRect(function (n) {
          var s = 0;
          n.forEach((res) => {
            s += res.height;
            heightArr.push(s)
          });
          var arr1 = heightArr;
          var arr2 = [];
          arr2.push(arr1[0]);
          for (var j = 1; j <= arr1.length - 1; j++) {
            arr2.push(arr1[j] - arr1[j - 1])
          }

          that.setData({
            heightArr: arr2
          })
        }).exec()
        return that.data.heightArr[i]
      }
    }
  },
  //点击左边事件
  left_list: function (e) {
    var that = this;
    var l_id = e.currentTarget.dataset.id;
    that.setData({
      rigId: l_id,
      classfiySelect: l_id
    })
    //console.log(l_id)
  },

})

作为新手，真的研究了好久，有问题欢迎一起探讨！

摄影陳
关注
专栏目录
微信小程序 - 最新详细实现 “左侧菜单，右侧内容“ 左右联动商品分类页面，左边是导航分类右侧是自定义内容，左侧分类菜单，右侧列表双向联动效果，左右二级联动，仿京东淘宝商城分类页面、美团外卖点餐界面！
王佳斌
07-23 2998
微信小程序，vue2，vue3，左右联动菜单，商品分类页面，左分类右列表，小程序实现左侧菜单，右侧列表双向联动效果，侧边菜单和右边滚动条，电商项目，点击菜单子分类联动对应商品，分类左右联动，上拉加载以及下拉刷新，右侧列表双向联动，商品分类左右联动，scroll-view，锚点，点击左侧大类后侧列表跟着变跟着刷新，微信小程序实现菜单左右联动效果，左菜单 右边列表数据，左侧菜单,右侧列表双向联动效果，右侧商品滑动时，左侧分类导航栏的相应分类被选中，商城分类滚动列表锚点(左菜单右列表)，美团外卖，京东商城，淘宝商
使用小程序实现左侧菜单，右侧列表双向联动效果
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
08-25 7190
在小程序开发中，实现双向联动效果，特别是左侧菜单与右侧列表的联动，可以提升用户体验，使用户更加方便地浏览内容。
小程序侧边栏左右联动
qypingi的博客
10-30 709
<view class="classify {{classifySeleted==classify.id?'active':''}}" wx:for="{{cakeTypesTitle}}" wx:for-item="classify" wx:key="*this" data-id="{{classify.id}}" bindtap="tapClassify"> <v...
微信小程序左右联动菜单样式
书写人生
03-07 619
【代码】微信小程序左右联动菜单样式。
微信小程序 uniapp 电商项目使用scroll-view实现左右菜单联动，点击菜单子分类联动对应商品
ilcn1949的博客
05-31 3646
uniapp的scroll-view用法，实现菜单滚动联动效果。
小程序-实现左右菜单联动功能
weixin_47124112的博客
08-06 3201
代码】小程序左右联动。
微信小程序侧边栏二级联动
Missbelover的博客
06-24 2670
实现效果如下 实现步骤 样式布局(.wxml文件) <scroll-view scroll-y="{{true}}" style="height:{{height}}px;" class="nav-right-menu"> <!-- 一级菜单 --> <view class="nav-...
微信小程序 - 实现左右菜单联动功能
sunshime的博客
04-01 8306
  今天给大家分享一下如何实现微信小程序左右菜单栏联动效果，具体过程如下： 效果图： 一、wxml文件   这里需要注意的一点是：右边列表循环的那一项必须要加上 id="scroll-{{index}}" ，少了这个是无法实现左边联动右边的效果的，这个坑我踩了很多次，所以在这里重点强调一下。 <!-- 实现左右联动效果 --> <view class="link"> &...
uniapp微信小程序实现菜单左右联动效果
最新发布
qq_35410565的博客
05-09 1255
仿点餐小程序，点餐页面实现左右菜单互联效果
微信小程序侧边栏一二级联动
huangqian0926的博客
05-18 4146
&lt;scroll-view scroll-y="{{true}}" style="height:{{height}}px;" class="nav-right-menu"&gt; &lt;!-- 一级菜单 --&gt; &lt;view class="nav-left-menu-list" wx:for="{{Menu}}" wx:for
微信小程序实现菜单左右联动
10-15
主要为大家详细介绍了微信小程序实现菜单左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序侧边栏滑动特效(左右滑动)
08-31
主要介绍了微信小程序侧边栏滑动特效(左右滑动),今天小编给大家带来四个漂亮的特效，具体效果展示和代码实现大家通过本文学习吧
小程序-侧边栏
04-18
进场运用的小程序 可以进行扩展使用 10.1.1 版本
小程序左右菜单联动效果
03-25
这是小程序左右菜单联动效果，数据都是本人手动模拟，请注意，数据结构，如有更改，自己调整，请自行下载。
微信小程序 侧边栏 商品栏联动代码
09-08
微信小程序侧边栏商品栏联动代码的实现主要是通过使用wxml、wxss和js文件，并结合微信小程序提供的API来实现的。 首先，需要在wxml文件中创建一个侧边栏和商品栏的布局。可以使用标签来创建侧边栏，并使用<scroll-...
微信小程序 简单的实现左右内容联动
CY的博客
06-16 2141
微信小程序 简单的实现左右内容联动
【微信小程序】联动菜单（左右侧菜单）实现
xiaobaizaza_Ry的博客
05-17 4139
联动菜单（左右侧菜单）实现【微信小程序】 最近为了实现课程设计，也做了一些前端的东西，今天想要做一个联动菜单来实现一些功能。实现了，也来做做笔记。 第1步：了解一下 左右侧菜单其实简单来讲就是把一个区域分成左右两个部分。关于组件，我觉得可以直接去微信开发文档看。通过代码，我觉得应该是可以理解的。话步多讲，直接上代码。（首先说明一点的是，我还是个刚刚接触前端的小白，可能有些写得不太好得，往各位博友多多指出改进得建议，相互学习） 第2步：实现（代码我有注释） 在这里插入代码片 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值