微信小程序-仿开眼分类页

最新推荐文章于 2024-04-12 16:14:28 发布

LiuJun2Son

最新推荐文章于 2024-04-12 16:14:28 发布

阅读量1.8k

点赞数

分类专栏：微信小程序文章标签：微信小程序开眼分类

本文链接：https://blog.csdn.net/u012987546/article/details/53354260

版权

微信小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这个篇文章带大家一起模仿开眼分类页的布局。

下面将会按照以下的顺序介绍：

布局的实现
逻辑的实现
样式的实现

1.布局的实现

整个布局是通过一个view包裹一个block,每一个block中包含一个item,每一个item都是由一个view包裹一个image图片和text文本组成



    <view class="classfiy-view1">
        <block wx:for="{{imgs}}" wx:for-index="index">
            <view class="classfiy-view2">
                    <text class="classfiy-text">{{item.title}}</text>
                    <image class="classfiy-image" src="{{item.img}}"></image>
            </view>
        </block>
    </view>

2.逻辑的实现

在页面注册的时候初始化数据，data中准备了一个imgs对象数组，里面存放的是每一个item显示的图片地址和标题


    Page({
        data:{
          imgs:[
                {
                  img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
                  title:"运动1"
                },
                {
                  img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
                  title:"运动2"
                },
                {
                  img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
                  title:"运动3"
                },
                {
                  img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
                  title:"运动4"
                },
                {
                  img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
                  title:"运动5"
                },
                {
                  img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
                  title:"运动6"
                },
                {
                  img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
                  title:"运动7"
                },
                {
                  img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
                  title:"运动8"
                },
            ]
        }
    })

3.样式的实现

.classfiy-view1样式：弹性布局，方向为水平，满行自定换行,…

.classfiy-view2样式：弹性布局，规定水平竖直方向居中，view（item）的宽度占一半左右，…

.classfiy-image样式：图片高度

.classfiy-text样式：字体位置为绝对布局，字体的加粗，…



    .classfiy-view1{

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      margin: 5px;
    }

    .classfiy-view2{
      display: flex;
      justify-content: center;
      align-items: center;

      width: 48%;
      margin: 3px;
    }

    .classfiy-image{
        height: 150px;
    }

    .classfiy-text{
      position: absolute;
      font: bold;
      font-size: 26px;
      color: white;
    }