小程序制作分类可滚动区域 scroll-view

心已赠人 2022-04-05 05:38 289阅读 0赞

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70]

classify.wxml

<view class='header'>
      <view class="search">
          <i-icon type="search" i-class='icon'  size="28" color="#959998"/>
      <text>搜索商品或粘贴淘宝标题</text>
      </view>
    </view>
    
    
     <view class='main'>
    
      <view class='left'>
        <scroll-view scroll-y="true" style="height:{
       {main}}px" scroll-into-view="true" scroll-with-animation="true">
          <block  wx:for="{
       {cateItems}}" wx:for-list="item">
            <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>
        </view>
        
        
        <view class="nav_right">
        
        <scroll-view scroll-y="true"  style="height:{
       {main}}px" scroll-into-view="true" scroll-with-animation="true">
        <view wx:if="{
       {cateItems[curIndex].ishaveChild}}">
          <block wx:for="{
       {cateItems[curIndex].children}}">
            <view class="nav_right_items">
            
              <navigator url="../../detail/detail}}">
                <image src="{
       {item.image}}"></image>
                <text>{
       {item.name}}</text>
              </navigator>
            </view>
          </block>
        </view>
        
        
        <view class="nodata_text" wx:else>该分类暂无数据</view>
        </scroll-view>
      </view>
    
     </view>

classify.js

// pages/class/class.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        main: 0,
        cateItems: [{
          
          cate_id: 1,
          cate_name: "女装",
          ishaveChild: true,
          children: [
            { 
                child_id: 1, 
                name: '洁面皂', 
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg" 
              }, { 
                child_id: 2, 
                name: '卸妆', 
                image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg" 
              }, { 
                child_id: 3, 
                name: '洁面乳', 
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg" 
              }, { 
                child_id: 4, 
                name: '面部祛角质', 
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg" 
                }
          ]
        }, {
            cate_id: 2,
            cate_name: "女鞋",
            ishaveChild: true,
            children: [
              {
                child_id: 1,
                name: '气垫bb',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"
              }, {
                child_id: 2,
                name: '修容/高光',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"
              }, {
                child_id: 3,
                name: '遮瑕',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"
              }, {
                child_id: 4,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }
            ]
          }, {
            cate_id: 3,
            cate_name: "男装",
            ishaveChild: true,
            children: [
              {
                child_id: 1,
                name: '气垫bb',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"
              }, {
                child_id: 2,
                name: '修容/高光',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"
              }, {
                child_id: 3,
                name: '遮瑕',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"
              }, {
                child_id: 4,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 5,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 6,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 7,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 8,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 9,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 10,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 11,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 12,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 13,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 14,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }, {
                child_id: 15,
                name: '腮红',
                image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
              }
            ]
          }, {
            cate_id: 4,
            cate_name: "彩妆",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 5,
            cate_name: "食品",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 6,
            cate_name: "洗护",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 7,
            cate_name: "运动",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 8,
            cate_name: "百货",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 9,
            cate_name: "箱包",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 10,
            cate_name: "内衣",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 11,
            cate_name: "家电",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 12,
            cate_name: "家居",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 13,
            cate_name: "成人",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 14,
            cate_name: "数码",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 15,
            cate_name: "护肤",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 16,
            cate_name: "萌宠",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 17,
            cate_name: "配饰",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 18,
            cate_name: "男鞋",
            ishaveChild: false,
            children: []
          }, {
            cate_id: 19,
            cate_name: "母婴",
            ishaveChild: false,
            children: []
          }
        ],
        curNav: 1,
        curIndex: 0
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function () {
        console.log('onLoad') 
        var that = this 
        // 获取系统信息 
        wx.getSystemInfo({ 
          success: function (res) { 
            console.log(res); 
            // 可使用窗口宽度、高度 
            console.log('height=' + res.windowHeight);
            console.log('width=' + res.windowWidth); 
            // 计算主体部分高度,单位为px 
            that.setData({ 
              // second部分高度 = 利用窗口可使用高度 - first部分高度（这里的高度单位为px，所有利用比例将100rpx转换为px） 
              main: res.windowHeight - res.windowWidth/750*100 
              }) 
            } 
          })
    
      
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
     //事件处理函数  
     switchRightTab: function (e) { 
       // 获取item项的id，和数组的下标值  
       let id = e.target.dataset.id, 
       index = parseInt(e.target.dataset.index); 
       // 把点击到的某一项，设为当前index
       this.setData({ 
         curNav: id, 
         curIndex: index 
         }) 
      },
    
      //跳转详情界面
      particulars: function (e) {
    
      }
    })

classify.wxss

.page{
      background: #e9edf3;
    }
    .header{
      color: #959998;
      height: 100rpx;
      display: flex;
      z-index: 180;
      top: 0px;
      background: #fff;
      align-items: center;
      border-bottom:1px solid #F0F4F3; 
      border-top:1px solid #F0F4F3; 
    }
    .search{
    
      width: 90%;
      height: 60rpx;
      border-radius:20px;
      margin:20rpx auto; 
      font-size: 14px;
      line-height: 60rpx;
      text-align: center;
      color: #252525;
      background: #EFF3F2;
     
    }
    
    .search text{
      color: #959998;
      font-family: monospace;
      text-align: center;
      line-height: 46rpx;
        
    }
    .search image{
      width: 46rpx;
      height: 46rpx;
     
    }
    .main{
      display: flex;
    }
    .left{
      width: 25%
    }
    .left view{
      text-align: center;
      line-height: 100rpx;
      background: #F4F8F7;
    }
    .left .active{
      background: #fff;
    }
    .active{
      color: #F7262F;
    }
    .nav_right{
      width: 75%; 
    }
     .nav_right .nav_right_items{  
      /*浮动向左*/  
      float: left;  
      /*每个item设置宽度是33.33%*/  
      width: 33.33%;  
      height: 120px;  
      text-align: center;  
    } 
    .nav_right .nav_right_items image{  
      /*被图片设置宽高*/  
      width: 60px;  
      height: 60px;  
      margin-top: 15px;  
    } .nav_right .nav_right_items text{  
      /*给text设成块级元素*/  
      display: block;  
      margin-top: 15px;  
      font-size: 14px;  
      color: black;
      /*设置文字溢出部分为...*/  
      overflow: hidden;  
      white-space: nowrap;  
      text-overflow: ellipsis;  
    } 
    .nodata_text {
      color: black;
      font-size: 14px;  
      text-align: center;
      margin-top: 200rpx; 
    } 
    //去掉滚动阴影效果
    ::-webkit-scrollbar{
      width: 0;
      height: 0;
      color: transparent;
    }
    
    /*左侧栏主盒子*/ .nav_left{  
      /*设置行内块级元素（没使用定位）*/  
      display: inline-block;  
      width: 25%;  
      height: 100%;  
      /*主盒子设置背景色为灰色*/  
      background: #f5f5f5;  
      text-align: center;  
    } 
    /*左侧栏list的item*/ 
    .nav_left .nav_left_items{  
      /*每个高30px*/  
      height: 40px;  
      /*垂直居中*/  
      line-height: 40px;  
      /*再设上下padding增加高度，总高42px*/  
      padding: 6px 0;  
      /*只设下边线*/  
      border-bottom: 1px solid #dedede;  
      /*文字14px*/  
      font-size: 14px; 
    } 
    
    /*左侧栏list的item被选中时*/  
    .nav_left .nav_left_items.active{  
      /*背景色变成白色*/  
      background: #fff;  
      color: #f0145a; 
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70]: /images/20220405/17919b635ec44519aef542967a4dd1db.png