小程序侧方导航栏联动右侧数据改变

最新推荐文章于 2023-03-06 17:04:05 发布
最新推荐文章于 2023-03-06 17:04:05 发布
阅读量1k 收藏 11
点赞数 2
分类专栏： 小程序开发 文章标签： 小程序侧方导航栏联动右侧数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44079650/article/details/103777028
版权
本文详细介绍了一种使用微信小程序scroll-view组件实现的iQOO手机分类布局方案，包括侧方导航栏和右侧数据展示区域的wxml代码及样式设置，展示了如何通过数据绑定和事件处理实现动态内容加载和交互。

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

效果图：

wxml：布局的话就是scroll-view这个组件

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html


 <!-- IQOO分类布局 -->

 <!--------------- 侧方导航栏布局 ---------------->
<view class="container">

  <scroll-view class='nav_left' scroll-y='true'>
    <block wx:for="{{cateItems}}" wx:key="{{index}}">
      <view class="nav_left_items {{curNav==item.cate_id?'active':''}}" bindtap="switchRightTab" data-index='{{index}}' data-id="{{item.cate_id}}">{{item.cate_name}}</view>
    </block>
  </scroll-view>

  <scroll-view class="nav_right" scroll-y="true">
    <!--如果有数据，才遍历项-->
    <view wx:if="{{cateItems[curIndex].children.length>0}}">
      <block wx:for="{{cateItems[curIndex].children}}" wx:key="{{index}}" >
        <view class="nav_right_items" data-index='{{index}}' bindtap="iqoo">
            <image src="{{item.image}}"></image>
            <view class='name1'>{{item.name1}}</view>
            <view class="name2">{{item.name2}}</view>
            <view class="name3">{{item.name3}}</view>  
        </view>
      </block>
    </view>

    <!--如果无数据，则显示数据-->
    <view class="nocate" wx:else>
      <text>该分类暂无数据</text>
    </view>
  </scroll-view>

</view>

js:数据是自己写好的 如果到家想通过后台获取的话就是在data中定义 ，然后去后台获取，我前边的博客中有类似向后台获取数据，请参考


Page({

  /**
   * 页面的初始数据
   */
  data: {
    cateItems: [
      {
        cate_id: 1,
        cate_name: 'iQOO',
        children: [
          {
            child_id: 1,
            name1: 'iQOO Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥2399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/99/10001399_1566458712423_750x750.png"
          },
          {
            child_id: 2,
            name1: 'X30 Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥4399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/14/10001814_1576461527559_750x750.png"
          },
          {
            child_id: 2,
            name1: 'X30 Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥4399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/14/10001814_1576461527559_750x750.png"
          },
          {
            child_id: 2,
            name1: 'X30 Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥4399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/14/10001814_1576461527559_750x750.png"
          },
          {
            child_id: 2,
            name1: 'X30 Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥4399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/14/10001814_1576461527559_750x750.png"
          },
          {
            child_id: 2,
            name1: 'X30 Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥4399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/14/10001814_1576461527559_750x750.png"
          },
          {
            child_id: 2,
            name1: 'X30 Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥4399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/14/10001814_1576461527559_750x750.png"
          },
          {
            child_id: 2,
            name1: 'X30 Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥4399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/14/10001814_1576461527559_750x750.png"
          },
          {
            child_id: 2,
            name1: 'X30 Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥4399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/14/10001814_1576461527559_750x750.png"
          },
        ]
      },
      {
        cate_id: 2,
        cate_name: ' NEX',
        children: [
          {
            child_id: 1,
            name1: 'X30 Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥4399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/14/10001814_1576461527559_750x750.png"
          },
          {
            child_id: 2,
            name1: 'X30 Pro 5G版',
            name2: '海风青 超广角后置AI三摄',
            name3: '￥4399.00',
            image: "https://shopstatic.vivo.com.cn/vivoshop/commodity/14/10001814_1576461527559_750x750.png"
          },
        ]
      },
      {
        cate_id: 3,
        cate_name: 'X系列'
      },
      {
        cate_id: 4,
        cate_name: 'S系列'
      },
      {
        cate_id: 5,
        cate_name: 'Z系列'
      },
      {
        cate_id: 6,
        cate_name: 'U系列'
      },
      {
        cate_id: 7,
        cate_name: 'Y系列'
      },
      {
        cate_id: 8,
        cate_name: '充电'
      },
      {
        cate_id: 9,
        cate_name: '音乐'
      },
      {
        cate_id: 10,
        cate_name: '配件'
      },
      {
        cate_id: 11,
        cate_name: '智能'
      },
      {
        cate_id: 12,
        cate_name: '摄影'
      },
      {
        cate_id: 13,
        cate_name: '生活'
      }
    ],
    curNav: 1,
    curIndex: 0
  },
  //左侧导航栏索引
  switchRightTab: function (e) {
    let id = e.target.dataset.id, index = e.target.dataset.index;
    this.setData({
      curNav: id,
      curIndex: index
    })
  },

})

wxss:

/* pages/iqoo/iqoo.wxss */
/* IQOO分类样式 */
/****************** 侧方导航栏 *******************/
.container{
  position:fixed;
  width:100%;
  height:100%;
  background-color:#FFF;
}
.nav_left{
  width:25%;
  height:100%;
  background:#F2F2F2;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
}
.nav_left .nav_left_items{
  height:100rpx;
  line-height:100rpx;
  font-size:28rpx;
}
.nav_left .nav_left_items.active{
  position:relative;
  /* background:#FFF; */
  color:#3366cc;
}
.nav_left .nav_left_items.active::before{
  display: inline-block;
  width:6rpx;
  height:60rpx;
  background:#3366cc;
  content:'';
  position:absolute;
  top:20rpx;
  left:0;
}

/****************** 右方数据栏 *******************/
.nav_right{
  position:absolute;
  top:0;
  right:0;
  width:75%;
  height:100%;
}
 
.nav_right .nav_right_items{
  float: left;   
  width: 50%; 
  text-align: center;  
  padding:30rpx 0;
} 
.nav_right .nav_right_items image{
  width: 180rpx;  
  height: 180rpx; 
} 
.name1{
  margin-top: 30rpx;
  font-weight: bold;
  font-size: 25rpx;
  text-align: center;
} 
.name2{
  margin-top: 20rpx;
  font-size: 20rpx;
} 
.name3{
  margin-top: 20rpx;
  font-size: 25rpx;
  text-align: center;
  color: #cc3333;
  font-weight: bold;
}  
.nocate{
  padding:100rpx;
  text-align: center;  
} 
 
.nocate image{
  width:70rpx;
  height:70rpx;
}
.nocate text{
  font-size:28rpx;
  display:block;
  color:#BBB;
}
/*隐藏滚动条*/
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

 

小程序滚动组件，左边导航栏与右边内容联动效果实现
weixin_33836223的博客
01-18 4219
效果如下： <scroll-view scroll-y="true" style='height:100%;'> <view wx:for="{{cates}}" class="nav-item {{ index === navActive ? 'active':'' }}" wx:key="{{index}}" ...
微信小程序分类-左侧导航与右侧内容联动优化
zhouhangzooo的博客
03-26 3729
由上一篇介绍了分类联动：https://blog.youkuaiyun.com/zhouhangzooo/article/details/88775790 之后，还有一些问题，比如当点击最后一个分类时，并且其商品较少时，会出现如下情况，如图 这样显示并不好，因此我们需要优化一下，比如判断是最后一个分类时，在右边添加一个大概高度的view，逻辑很简单，直接上代码： <block wx:i...
微信小程序云开发侧边导航展示数据
一只蜗牛
04-12 1252
界面效果如下 ![在这里插入图片描述](https://img-blog.csdnimg.cn/33e544cd4ac04e08b861928ecdeeea74.png =15 x 40) 代码 js // pages/fenlei/fenlei.js Page({ data: { active:0, currentTab:0, list:[] }, onLoad(){ wx.cloud.database().collection(
微信小程序左右联动菜单（即可左联动，也可右联动）
weixin_30480075的博客
08-27 2077
<!-- 搜索 --> <view class="search"> <input class="search-box" placeholder='痘研商城' bindtap='goodsName'></input> <image src="{{staticImg}}index/iconSearch.png" cl...
小程序scroll-view滚动组件，左边导航栏与右边内容联动，选择区间实现
guairena的博客
05-24 967
效果 具体思路同 小程序scroll-view滚动组件，左边导航栏与右边内容联动效果实现 不同的是上面的文章为单选，这里是选择范围可以选择两个月份。 思路 主要是在选择月的时候通过判断一个数组，如果数组里有两个值，则再次点击会清空数组重新选择第一个push进数组；如果数组里有一个值，点击的时候会push进第二个；可以允许选择的两个值相等。 具体代码 <!--pages/monthOfficeModule/monSectCalendar/monSectCalendar.wxml-->..
微信小程序实现左右列表联动
10-17
在微信小程序中，实现左右列表联动是一种常见的交互设计，它允许用户在左侧的分类列表中选择一个类别，然后右侧的列表会根据所选类别展示对应的内容。这种功能常见于电商应用，帮助用户快速定位到他们感兴趣的商品。...
微信小程序左侧导航栏与右侧内容区商品联动并实现导航栏高亮
m0_64534855的博客
03-06 1157
微信小程序导航栏于商品区联动并实现高量
微信小程序分类-左侧导航与右侧内容联动
热门推荐
zhouhangzooo的博客
03-24 1万+
左侧导航与右侧内容联动一、首先是点击左侧导航，我们右侧内容需要滑动至相应的位置。 思路是：点击左侧某一项，获取该元素的id，也就是左侧view的id，然后动态传到右侧内容的scroll-into-view，scroll-into-view的值为某个子元素的id， 这里的子元素说的是右侧的view，我们将左侧view的id和右侧view的id设置为同一个值时，这样当左侧id发生变化时，scroll...
小程序 点击左侧选项 显示右侧内容
Y_001010的博客
08-26 1177
wxml <view class="content"> <!-- 左侧选择 --> <view class='left'> <view wx:for="{{date}}" wx:key="" catchtap='clickList' class="{{flag==item.id?'select':'normal'}}" id='{{item.id}}' bindtap='switchNav'> ...
微信小程序侧边栏
01-13
微信小程序侧边栏，支持手势操作
小程序左滑动显示菜单
06-13
小程序左滑动显示菜单 小程序左滑动显示菜单 小程序左滑动显示菜单
左边菜单,右边内容
01-16
android ui设计 android源码 android开源项目 android项目代码
小程序实现左右滑动切换菜单+瀑布流显示列表demo
05-27
小程序实现左右滑动列表区域，切换菜单（横向滑动菜单，切换时自动设置选中的菜单窗口居中显示），加载显示对应瀑布流数据，页面滚动时，设置菜单栏是否置顶显示
小程序学习css点击左侧导航栏右侧具体元素自动换行排列
weixin_46420789的博客
09-27 440
想要实现这样的样式,直接贴上代码后面方便再次使用 wxml: <!--左侧导航栏--> <scroll-view class="scrollleft" scroll-y> <view class="scrollleftV {{curId == item.id ? 'chosen' : 'notChosen'}}" wx:for="{{leftArr}}" wx:key="id" data-id="{{item.id}}" catchtap="clickTitle".
图标高亮_给你代码：小程序内容滚动与导航栏自动高亮联动
weixin_31302227的博客
01-07 515
这是张非常好看的封面(小编：呵呵)这个标题想了很久，总感觉没有表达精准，毕竟要做的东西逼格比较高，不是只言片语所能概之。没图不说话，一图胜千言：(一千文字已凑满，本篇完。)催稿员：前言在持续迭代我们的鲲豆荚小程序过程中，需要开发一个分类导航浏览的功能：点击左边分类，右边可滚动到对应分类区域；上下滑动右边分类内容区域，左边对应的导航栏自动高亮；滚动要尽可能流畅，卡的不要！对于老司机来说，这种两栏布局...
❤ ❤微信小程序：数据库查询实现导航栏切换❤ ❤
yingshuangtu的博客
08-05 957
实现原理： 文章目录完整代码一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 完整代码 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as
小程序中的页面切换2（不用新建页面，左侧导航栏）
qq_44699174的博客
08-11 350
不用新建页面
小程序基本命令
aiven1637的博客
10-30 3426
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序侧边导航栏滚动联动且高度自适应
最新发布
01-12
### 微信小程序实现侧边导航栏滚动联动并自适应高度 为了实现在微信小程序中的侧边导航栏与内容区域能够同步滚动的效果，同时让布局能够自动调整到合适的高度，可以采用`<scroll-view>`组件来构建页面结构。对于左侧的导航菜单以及右侧的内容展示部分均需应用此组件，并通过CSS样式控制其尺寸。 #### 关键点在于： - 左右两侧都应被包裹在一个固定宽度的父级容器内； - 使用`flex`布局使得子项按照设定的比例分配空间； - 给定的高度属性确保了即使内容超出屏幕范围也能正常显示滚动条[^1]； ```html <!--index.wxml--> <view class="container"> <scroll-view scroll-y class="left-menu" bindscroll="handleLeftScroll"> <!-- 导航链接 --> {navigationItems.map(item => ( <view data-index={item.index} onClick="onNavClick">{item.name}</view> ))} </scroll-view> <scroll-view id="contentScrollView" scroll-y class="right-content" bindscrolltolower="loadMoreData"> {/* 动态加载的商品卡片 */} {productList.map(product => ( <view>{/* 商品详情 */}</view> ))} </scroll-view> </view> ``` ```css /* index.wxss */ page { height: 100%; } .container { display: flex; width: 100%; height: calc(100vh - var(--window-top)); /* 减去顶部安全距离 */ } .left-menu, .right-content { overflow-x: hidden; /* 防止横向溢出 */ } .left-menu { background-color: #f8f9fa; padding-right: 20rpx; box-sizing: border-box; white-space: nowrap; font-size: 28rpx; line-height: 80rpx; text-align: center; color: rgba(0, 0, 0, .6); min-width: 20%; /* 可根据实际需求调整比例 */ } .right-content { flex-grow: 1; } ``` 当用户点击不同的分类时，可以通过监听事件改变当前激活状态，并利用`wx.createSelectorQuery()`方法获取对应商品区块的位置信息，进而调用API接口平滑跳转至指定位置。同样地，在检测到底部触发加载更多数据的情况下也可以采取相似的方式处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值