商城侧边栏分类代码，实现局部垂直滚动

短命女 2023-07-24 09:08 2阅读 0赞

wxml代码

<view class="good-body">
    <scroll-view scroll-y="true" class="fenlei" style="height:{ { windowHeight}}rpx;">
      <block wx:key="">
        <view class="fenlei-item fenlei-this">分类1</view>
      </block>
    </scroll-view>
    </view>

wxss代码

.good-body{ 
      display: flex;
      top:110rpx; /*因为我的布局中，上方是固定定位的搜索框，所以得把搜索框的位置让出来*/
      border-top: 1rpx solid #dedede;
    }
    /* 分类栏 */
    .fenlei{ 
      background: #f5f5f5;
      text-align: center;
      position:fixed;
      width: 25%;
      display: inline-block;
    }
    .fenlei-item{ 
      height: 80rpx;  
      line-height: 80rpx;  
      padding: 12rpx 0;  
      border-bottom: 1px solid #dedede;  
      font-size: 28rpx;
    }
    /* 分类选中后的样式 */
    .fenlei-this{ 
      background: #fff;  
      color: #3385ff; 
      border-left: 6rpx solid #3385ff;
    }

scroll-view 组件必须设置一个高度才有效，但是在高度不能确定的情况系，可以获取用户设备的信息来确定组件需要的高度  
js代码

onLoad: function () { 
        this.getsys()
      },
      getsys:function(){  //获取设备高度，设置分类栏和商品栏的高度
        let that = this
        wx.getSystemInfo({ 
          success: function(res) { 
              let windowHeight = (res.windowHeight * (750 / res.windowWidth)) - 110 //将px转换成rpx
              that.setData({ 
                  windowHeight: windowHeight
              });
          }
        });
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关商城侧边栏分类代码，实现局部垂直滚动

wxml代码 <view class="good-body"> <scroll-view scroll-y="true" class="fenlei" sty

短命女/ 2023年07月24日 09:08/ 0 赞/ 3 阅读

相关 php侧边栏导航效果,bootstrap实现简单侧边导航栏效果

本篇文章给大家介绍一下bootstrap侧边导航栏的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![ec862e11c6ccf6a4cf431

梦里梦外;/ 2023年01月14日 04:57/ 0 赞/ 388 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 359 阅读

相关 css基础案例2-小米商城侧边栏

案例图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

超、凢脫俗/ 2022年11月04日 12:24/ 0 赞/ 144 阅读

相关侧边分类导航滚动以及购物车

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

太过爱你忘了你带给我的痛/ 2022年10月17日 13:41/ 0 赞/ 162 阅读

相关安卓侧边栏实现

安卓侧边栏实现 [上一篇][Link 1]写的是侧滑布局,虽然有侧滑效果,但是没有阴影,效果不是很好这一次我们来为布局加上阴影 ![这里写图片描述][20160

心已赠人/ 2022年09月21日 11:45/ 0 赞/ 291 阅读

相关安卓侧边栏实现

安卓侧滑布局实现来,先上效果图 ![这里写图片描述][20160618153447587] package xiaolin.widget;

痛定思痛。/ 2022年08月22日 15:24/ 0 赞/ 343 阅读

相关侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940 侧边栏式例 ![在这里插入图片描述][20190605171854957.gif] 上

爱被打了一巴掌/ 2022年01月22日 08:27/ 0 赞/ 411 阅读

相关微信小程序之侧边栏分类实现

效果图 ![在这里插入图片描述][20190422222348867.gif] 实现思路把屏幕当成一个固定的盒子，然后把盒子分成两边，并让盒子的每一边都能够滚动

谁借莪１个温暖的怀抱￠/ 2021年06月26日 16:06/ 0 赞/ 608 阅读

相关 CSS实现侧边栏导航

CSS实现侧边栏导航

小鱼儿/ 2021年05月03日 15:53/ 0 赞/ 698 阅读