js开发11 电商项目分类页面的优化----列表的横向滚动宫格布局原创

noutsider

发布于 2021-1-29 23:20

浏览

1收藏

上篇文章中关于"泸州老窖"的页面布局我采取的是简单的不断套用<div></div>(见下图)比较笨拙,技术含量较低,而且页面很单一, 不够美观.今天给大介绍一种在原有的列表基础上新的布局----列表的横向滚动宫格布局. 在微信小程序的宫格构建过程中需要用到"flex-wrap"来自动换行.而在鸿蒙当中则不需要使用, 它会根据你的数据自适应布局,这里不得不夸一下华为的工程师们,这个真的很细节,他们更加注重的是对数据的体现,数据驱动视图,而并非仅仅是对视图的渲染. 比如你要构建的是一行三个宫格, 某一个数据多出来一组 ,它就会根据屏幕的大小自适应自动布局四个宫格,后面会展示. 同时在获取图片时建议尽量采取nginx反向代理技术,有利于后期修改和维护(我显然没用,手动狗头)

js业务逻辑层: 这种布局其实就是一个二维的表格,因此在定义数据的时候,我们采用数组中套数组.

eightt:[[{"text":"国窑1573","img":"common/guojiao.jpg"},{"text":"老窖头曲","img":"common/touqu.jpg"}],
                [{"text":"老窖特曲","img":"common/tequ.jpg"},{"text":"老窖二曲","img":"common/erqu.jpg"}],
                [{"text":"老窖浓香经典","img":"common/nongxiang.jpg"},{"text":"泸州老酒坊","img":"common/laojiu.jpg"}],
                [{"text":"永盛烧坊","img":"common/yongsheng.jpg"},{"text":"老窖醇香","img":"common/chunxiang.jpg"}]],

视图渲染:

 <!--泸州老窖start-->
            <div class="box eight">
              <list class="list8">
                  <block for="{{eightt}}">
                      <list-item class="list-item88">
                          <block for="{{(index,value) in $item}}">
                              <div class="box888">
                              <image class="img88" src="{{value.img}}"> </image>
                              <text class="txt88">{{value.text}}</text>
                              </div>
                          </block>
                      </list-item>
                  </block>
              </list>
            </div>
 <!--泸州老窖end-->

css属性设置:

.list8{
    width: 100%;
    height: 100%;
}
.list-item88{
    width: 100%;
    height: 25%;
    border-bottom: 1px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxx{
    width: 50%;
    height: 50%;
    border-radius: 20px;
    border: 1px solid red;
    border-radius: 20px;
}
.img88{
    width: 100%;
    height: 85%;
    border-radius: 25px;
}
.txt88{
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
}
.box888{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 80%;
    border: 2px solid red;
     border-radius: 25px;
    margin: 5px;
}

效果展示:

修改之前(图一)