电影票布局，上左有序列表粘性

最新推荐文章于 2024-08-15 22:40:53 发布

姽式、

最新推荐文章于 2024-08-15 22:40:53 发布

阅读量81

点赞数 1

分类专栏： js笔记文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_45936690/article/details/130867096

版权

js笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章展示了如何使用Heml和Less来创建一个具有滚动条的布局，其中左侧序列和上方序列具有粘性效果。代码示例包含了视图容器、内嵌视图以及数据遍历结构，用于展示设备位置和数量。Less样式定义了元素的尺寸、颜色、边框和定位，以实现预期的滚动和粘性效果。

摘要由CSDN通过智能技术生成

效果图：
原始状态
在这里插入图片描述
宽度出现滚动，左边序列粘性
高度出现滚动条，上边序列也有粘性，忘记截图了

// heml
<view class="test">
   <view class="test-x">
     <view v-for="(item,index) in list.storeArr[0]" :key="index">{{index+1}}</view>
   </view>
   <view class="text-box">
     <view class="text-p" v-for="(item,index) in list.storeArr" :key="index">
       <view class="test-y">{{index+1}}</view>
       <view class="test-li" v-for="(val,ind) in item" :key="ind">{{val.device_box_num}}</view>
     </view>
   </view>
 </view>

// less
.test {
	width: 100%;
    height: 60vh;
    background: skyblue;
    box-sizing: border-box;
    padding: 0 40rpx;
    display: flex;
    font-size: 22rpx;
    overflow: auto;
    flex-direction: column;
    .test-x {
      width: fit-content;
      height: 30rpx;
      background: rgba(0,0,0,.2);
      border-radius: 15rpx;
      box-sizing: border-box;
      padding: 0 14rpx;
      display: flex;
      margin-left: 40rpx;
      margin-bottom: 10rpx;
      position: sticky;
      top: 0;
      view {
        width: 42rpx;
        height: 100%;
        margin-right: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
      }
    }
    .text-box {
      width: fit-content;
      .text-p {
        display: flex;
        color: #DEE1E5;
        .test-y {
          width: 30rpx;
          height: 42rpx;
          background: rgba(0,0,0,.2);
          // box-sizing: border-box;
          padding: 2rpx 0rpx;
          .flex-center-center;
          position: sticky;
          left: 0;
        }
        .test-li {
          width: 42rpx;
          height: 42rpx;
          .flex-center-center;
          border: 1rpx solid #27EA62;
          border-radius: 7rpx;
          color: #DEE1E5;
          margin-bottom: 10rpx;
          margin-left: 20rpx;
        }
      }
    }
}

// 数据结构
      list: {
        "id": 9,
        "x_num": 8,
        "y_num": 12,
        "storeArr": [
              [
                  {
                      "device_position": "1-1",
                      "device_box_num": 89,
                      "id": 0,
                      "device_id": 9,
                      "product_id": 0,
                      "product_name": "",
                      "product_brand_id": 0,
                      "product_brand_name": "",
                      "product_series_name": "",
                      "product_series_id": 0,
                      "surplus_stock": 0,
                      "total_stock": 0,
                      "status": 0
                  },
                  {
                      "device_position": "1-2",
                      "device_box_num": 90,
                      "id": 0,
                      "device_id": 9,
                      "product_id": 0,
                      "product_name": "",
                      "product_brand_id": 0,
                      "product_brand_name": "",
                      "product_series_name": "",
                      "product_series_id": 0,
                      "surplus_stock": 0,
                      "total_stock": 0,
                      "status": 0
                  },
              ],
              [...]
          ]