微信小程序左右联动菜单样式

已于 2024-03-07 12:42:08 修改
阅读量912 收藏 10
点赞数 7
分类专栏： 微信小程序 手机开发 文章标签： 微信小程序 notepad++ 小程序
于 2024-03-07 12:41:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yelin042/article/details/136530458
版权 

<view class="search">  
  <view class="search-bar">  
    <view class="search-wrap">  
        <icon type="search" size="16" class="icon-search" />  
        <input type="text" placeholder="请输入关键字9" class="weui-search-bar__input" name="searchKeyword" bindinput="bindKeywordInput" value="{{searchKeyword}}" />  
    </view>  
    <view class="search-cancel" bindtap="keywordSearch">搜索</view>  
  </view>  
  <view class="search-result1">  
    
 
  <!-- 左边商品分类 -->
  <scroll-view class="office-left" scroll-y scroll-top="{{scrollTops}}">
    <view wx:for="{{goodsList}}" class="goodsTitle {{tabCur==index?'office-active':''}}" wx:key="index" bindtap="gl" id="{{index}}">

     

    
    {{item.title}}

    </view>
  </scroll-view>

  <!-- 右边商品列表 -->
  <scroll-view class="office-right" scroll-y scroll-with-animation scroll-into-view="scroll-{{rightCur}}" bindscroll="scrollLink">
    <view wx:for="{{goodsList}}" class="menu-con" wx:key="index" bindtap="gl" id="{{index}}"  id="scroll-{{idxs}}">
      <view class="office-title"> {{item.title}}</view>
     
      <view wx:for="{{item.list}}" class="weui-cell weui-cell_access"  wx:for-item="itemNames" wx:key="idxs" wx:for-index="idxs" > 
      <view class="weui-cell__bd">
      <p>{{itemNames.name}}</p> </view>
      <view class="weui-cell__ft"></view> 
      </view>

    </view>
  </scroll-view>
</view>

</view>  

// pages/book/office/bigofficelist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabCur: 0, //当前项
    rightCur: 0, // 用于实现左边联动右边
    goodsList: [{
        title: '碳酸类型',
        id: 1,
        list:[{
          name:'可口可乐',
          img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'雪碧',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F93%2F00%2F5982eed63cc27_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339581&t=8bbd7f16e03512ff0e8c32100bbcfc86',
          sell: '月售：88',
          price: '4.8'
        },
        {
          name:'可口可乐',
          img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'雪碧',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F93%2F00%2F5982eed63cc27_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339581&t=8bbd7f16e03512ff0e8c32100bbcfc86',
          sell: '月售：88',
          price: '4.8'
        },
        {
          name:'可口可乐',
          img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'雪碧',
          img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',
          sell: '月售：88',
          price: '4.8'
        }
        ]
      }, {
        title: '奶茶类型',
        id: 2,
        list:[{
          name:'阿萨姆奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'香飘飘奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'阿萨姆奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'香飘飘奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'阿萨姆奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'香飘飘奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        }
        ]
      },
      {
        title: '矿泉水',
        id: 3,
        list:[
          {
          name:'农夫山泉',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi4%2F792547767%2FO1CN01HuwT1T27FKjNjeyQO_%21%21792547767.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285923&t=29d7244212e15dc78bb5bdf1d617a45f',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'怡宝',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F11%2F05%2FFonL0_5VwTfHmiwQiAlBtIZiy3sq.jpg%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fjpg&refer=http%3A%2F%2Fimg.yzcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339509&t=e1988f3159060384664ce3de18e45aaf',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'农夫山泉',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi4%2F792547767%2FO1CN01HuwT1T27FKjNjeyQO_%21%21792547767.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285923&t=29d7244212e15dc78bb5bdf1d617a45f',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'怡宝',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F11%2F05%2FFonL0_5VwTfHmiwQiAlBtIZiy3sq.jpg%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fjpg&refer=http%3A%2F%2Fimg.yzcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339509&t=e1988f3159060384664ce3de18e45aaf',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'农夫山泉',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi4%2F792547767%2FO1CN01HuwT1T27FKjNjeyQO_%21%21792547767.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285923&t=29d7244212e15dc78bb5bdf1d617a45f',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'怡宝'
        },
        {
          name:'怡宝'
        },
        {
          name:'怡宝'
        },
        {
          name:'怡宝'
        },
        {
          name:'怡宝'
        },
        {
          name:'怡宝'
        },
        {
          name:'怡宝'
        },
        {
          name:'怡宝'
        },
        {
          name:'怡宝'
        },
        {
          name:'怡宝'
        },
        {
          name:'怡宝'
        }
        ]
      },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  gl(e) {
    this.setData({
      tabCur: e.currentTarget.id,
      rightCur: e.currentTarget.id,
    })
  },

  scrollLink(e) {
   

    let list = this.data.goodsList
    let itemHeight = 0;
    for (let i = 0; i < list.length; i++) {
      //拿到每个元素
      let els = wx.createSelectorQuery().select("#scroll-" + i);
      els.fields({
        size: true
      }, function (res) {
        list[i].top = itemHeight;
        itemHeight += res.height;
        list[i].bottom = itemHeight
      }).exec()
    }

    // 拿到滚动的高度
    let scrollTop = e.detail.scrollTop;
    for (let i = 0; i < list.length; i++) {
      if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
        this.setData({
          tabCur: i,
        })
        return false
      }
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
.office-List{
  width: 100%;
  height: 100%;
  display: flex;
}
.office-left{
  float: left;
  width: 30%;
  background-color: #EEEEEE;
  min-height: 1000vh;
}
.office-active {
  background: #fff;
  border-left: 5px solid #4dcd70;
  color: #4dcd70;
  font-weight: bold;
}
.office-title {
  padding: 15px 8px;
  background: #eee;
}

.office-left .goodsTitle{
  line-height: 100rpx;
  text-align: center;
}
.office-active{
  background-color: #fff;
}
.office-right{
  float: left;
  width: 70%;

  height:  100%;
}

.office-con {
  width: 100%;
  overflow: hidden;
}
.goodsItem{
  padding: 20rpx;
}
.goodstitle{
  padding: 20rpx;
}
.goodsName{
  text-align: center;
}

使用小程序实现左侧菜单，右侧列表双向联动效果
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
08-25 7515
在小程序开发中，实现双向联动效果，特别是左侧菜单与右侧列表的联动，可以提升用户体验，使用户更加方便地浏览内容。
uniapp微信小程序实现菜单左右联动效果
qq_35410565的博客
05-09 1928
仿点餐小程序，点餐页面实现左右菜单互联效果
微信小程序实现菜单左右联动
10-15
主要为大家详细介绍了微信小程序实现菜单左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序点单左右联动的效果实现
qq_36158551的博客
10-04 2136
微信小程序点单左右联动的效果实现原理解析：点击左边标签会跳到右边相应位置：点击改变rightCur值，转跳相应位置滑动右边，左边标签会跳到相应的位置：监听并且设置每个右边元素的top和bottom，再判断当前滑动高度在那个元素之间，再改变左边的标签的tabCur，并且转跳相应位置。
微信小程序实现左侧商品类型选择，右边显示商品列表的效果？
最新发布
初学者
02-15 1004
在微信小程序中实现一个左侧为商品类型选择，右侧显示商品列表的效果，通常涉及到使用 scroll-view、view、swiper等组件来布局和展示内容。
小程序-实现左右菜单联动功能
weixin_47124112的博客
08-06 3448
代码】小程序左右联动。
【微信小程序】联动菜单（左右侧菜单）实现
xiaobaizaza_Ry的博客
05-17 5139
联动菜单（左右侧菜单）实现【微信小程序】 最近为了实现课程设计，也做了一些前端的东西，今天想要做一个联动菜单来实现一些功能。实现了，也来做做笔记。 第1步：了解一下 左右侧菜单其实简单来讲就是把一个区域分成左右两个部分。关于组件，我觉得可以直接去微信开发文档看。通过代码，我觉得应该是可以理解的。话步多讲，直接上代码。（首先说明一点的是，我还是个刚刚接触前端的小白，可能有些写得不太好得，往各位博友多多指出改进得建议，相互学习） 第2步：实现（代码我有注释） 在这里插入代码片 ...
微信小程序 左右联动菜单
weixin_38168547的博客
09-04 390
根据左侧列表，联动跳右侧内容。 效果如图： wxml代码： <view class="page"> <!-- 左侧导航 --> <view class='tui-fixed-left'> <scroll-view class='tui-city-scroll' scroll-x="true" scroll-y=...
小程序左右菜单联动效果
03-25
这是小程序左右菜单联动效果，数据都是本人手动模拟，请注意，数据结构，如有更改，自己调整，请自行下载。
微信小程序实现购物页面左右联动
10-17
在微信小程序中实现购物页面的左右联动是一种常见的交互设计，它可以提供更好的用户体验，尤其是在展示商品分类和对应商品列表时。这种设计通常包含一个左侧的菜单栏，用于切换不同的商品分类，右侧则是根据所选分类...
微信小程序实现左右列表联动
10-17
主要为大家详细介绍了微信小程序实现左右列表联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 联动菜单 部门 岗位
12-22
微信联动菜单 部门 岗位关系 选择器 简单易懂的小dome 代码量非常少 可以直接使用
微信小程序左右联动效果wechat-scroll-linkage-master.zip
09-25
微信小程序左右联动效果wechat-scroll-linkage-master.zip
微信小程序 使用picker封装省市区三级联动实例代码
09-01
总的来说，实现微信小程序中的省市区三级联动，需要理解并熟练运用Template、事件绑定、数据结构设计以及与服务器的通信。通过封装，可以方便地在多个页面中复用这一功能，提高开发效率。同时，良好的数据结构设计和...
微信小程序实现联动菜单的简易选择器代码示例
在微信小程序中，联动菜单的实现通常涉及到前端的编程，主要使用了微信小程序的WXML模板语言和WXSS样式表语言，以及JavaScript来进行数据的交互。在描述中提到“简单易懂的小demo 代码量非常少 可以直接使用”，这...
微信小程序左右菜单mysql_微信小程序 左右联动菜单
weixin_39840733的博客
01-19 298
//声明全局变量let proListToTop = [], menuToTop = [], MENU = 0,windowHeight, timeoutId;Page({/*** 页面的初始数据*/data: {staticImg: app.globalData.staticImg,currentActiveIndex:0,//接口返回的商品数组navList: [{c_id:"01",c_na...
微信小程序 uniapp 电商项目使用scroll-view实现左右菜单联动，点击菜单子分类联动对应商品
ilcn1949的博客
05-31 3987
uniapp的scroll-view用法，实现菜单滚动联动效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值