“Flex弹性布局、轮播图mock遍历数据和首页布局解析与实践“

叶秋∵2023-10-18 0:03

目录

引言

在现代网页开发中，灵活性和响应式布局是至关重要的。为了实现这一目标，前端开发人员需要掌握各种先进的技术。本篇博客将深入介绍和讨论三个主要主题：Flex弹性布局、轮播图mock遍历数据和首页布局。我们将逐步展示这些技术的使用方法，并提供丰富的实例和信息。

1. Flex弹性布局介绍及使用

什么是Flex弹性布局？

Flex弹性布局是一种现代的CSS布局模型，它提供了更灵活的方式来排列和对齐项目。通过使用Flex容器和Flex项目，我们可以轻松地实现自适应的布局。

Flex容器与Flex项目

Flex容器是包含Flex项目的父元素，通过设置display: flex;即可将其定义为Flex容器。而Flex项目则是容器内部的子元素，具体的布局由各个Flex项目的属性决定。

Flex属性详解

在Flex布局中，有许多属性可以用于控制Flex容器和Flex项目的行为。例如，flex-direction用于控制项目的排列方向，justify-content用于水平对齐项目，align-items用于垂直对齐项目等等。

当使用 Flex 弹性布局时，有许多属性可以用于控制 Flex 容器和 Flex 项目的行为。以下是对每个属性的详细解释：

1.flex-direction：指定 Flex 项目在 Flex 容器中的排列方向。它有四个可能的值：

  • row（默认）：水平排列，左对齐。

  • row-reverse：水平排列，右对齐。

  • column：垂直排列，从上到下。

  • column-reverse：垂直排列，从下到上。

    2.flex-wrap：定义 Flex 项目是否换行。它有三个可能的值：

  • nowrap（默认）：不换行，所有 Flex 项目在同一行/列上。

  • wrap：换行，如果空间不足则新行/列开始。

  • wrap-reverse：换行，如果空间不足则新行/列开始，但逆序排列。

    3,flex-flow：是 flex-direction 和 flex-wrap 的简写形式。例如：row wrap 表示水平排列、换行。

4.justify-content：控制 Flex 项目在主轴上的对齐方式。它有五个可能的值：

  • flex-start（默认）：左对齐。

  • flex-end：右对齐。

  • center：居中对齐。

  • space-between：两端对齐，项目之间的间隔相等。

  • space-around：每个项目周围的间隔相等，包括两端。

    5.align-items：控制 Flex 项目在交叉轴上的对齐方式。它有五个可能的值：

  • stretch（默认）：拉伸填满整个交叉轴。

  • flex-start：顶部对齐。

  • flex-end：底部对齐。

  • center：居中对齐。

  • baseline：基线对齐。

6.align-content：用于多行/列的 Flex 项目，控制它们在交叉轴上的对齐方式。它有五个可能的值：

  • stretch（默认）：拉伸填满整个交叉轴。
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：居中对齐。
  • space-between：两端对齐，项目之间的间隔相等。
  • space-around：每个项目周围的间隔相等，包括两端。
    这些属性可以通过在 Flex 容器或 Flex 项目上设置相应的样式来控制布局行为。灵活使用这些属性可以轻松创建各种复杂且适应性强的布局。

2. 轮播图mock遍历数据

简述轮播图的作用和意义

轮播图是一种常见且有效的网页元素，通常用于展示多张图片或内容。它可以帮助我们在有限的空间内展示更多的信息，提升用户体验。

处理mock数据的重要性

在开发过程中，使用虚拟数据进行遍历和展示非常重要。这样可以更好地模拟真实情况，并方便调试和开发。

使用Mock模拟数据遍历

app.json

javascript 复制代码 
{
  "pages":[
    "pages/index/index",
    "pages/meeting/list/list",
    "pages/vote/list/list",
    "pages/ucenter/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/static/tabBar/coding.png",
      "selectedIconPath": "/static/tabBar/coding-active.png"
    },
      {
        "pagePath": "pages/meeting/list/list",
        "iconPath": "/static/tabBar/sdk.png",
        "selectedIconPath": "/static/tabBar/sdk-active.png",
        "text": "会议"
      },
      {
        "pagePath": "pages/vote/list/list",
        "iconPath": "/static/tabBar/template.png",
        "selectedIconPath": "/static/tabBar/template-active.png",
        "text": "投票"
      },
      {
        "pagePath": "pages/ucenter/index/index",
        "iconPath": "/static/tabBar/component.png",
        "selectedIconPath": "/static/tabBar/component-active.png",
        "text": "设置"
      }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

config/app.js

javascript 复制代码 
// 以下是业务服务器API地址
 // 本机开发API地址
 var WxApiRoot = 'http://localhost:8080/demo/wx/';
 // 测试环境部署api地址
 // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
 // 线上平台api地址
 //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
 
 module.exports = {
   IndexUrl: WxApiRoot + 'home/index', //首页数据接口
   SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
   MettingInfos: WxApiRoot+'meeting/list', //会议信息
 };

index.wxml

javascript 复制代码 
<!--index.wxml-->
<view>
  <swiper indicator-dots="true" autoplay="true">
<block wx:for="{{imgSrcs}}" wx:key="*text">
  <swiper-item>
    <image src="{{item.img}}"></image>
  </swiper-item>
</block>
</swiper>
</view>

index.js

javascript 复制代码 
// index.js
// 获取应用实例
const app = getApp()
const api = require("../../config/app.js")
Page({
  data: {
    imgSrcs:[]
  }, 
  loadSwiperImgs(){
     let that=this;
     wx.request({
         url: api.SwiperImgs,
         dataType: 'json',
         success(res) {
           console.log(res)
           that.setData({
               imgSrcs:res.data.images
           })
         }
       })
   },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
    this.loadSwiperImgs()
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

小程序会有HTTPS校验,http是不能通过的，所以我们要关一下

代码写好后就接着以下操作便OK

模拟数据

javascript 复制代码 
{
  "data": {
    "images":[
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png",
    "text": "1"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png",
    "text": "2"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png",
    "text": "3"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png",
    "text": "4"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png",
    "text": "5"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png",
    "text": "6"
  }
]
  },
  "statusCode": "200",
  "header": {
    "content-type":"applicaiton/json;charset=utf-8"
  }
}

效果展示

3. 首页布局

index.wxss

javascript 复制代码 
/**index.wxss**/
.mobi-title{
   background-color: lightgray;
   padding: 10px;
   font-weight: 900;
}
.mobi-icon{
  border: 1rpx solid red;
  margin-right: 5px;
}
.list{
display: flex;
align-items: center;
border-bottom: 2px solid  silver;
}
.list-img{
padding:0 10px ;
}
.video-img{
  height: 50px;
  width: 55px;

}
.list-detail{

}
.list-title{
font-weight: 600;
margin: 3px 3px;
}
.list-tag{
  display: flex;
  align-items: center;
}
.list-info{

}
.state{
  border: 1px solid lightblue;
  padding: 2px;
  color: lightblue;
  margin:10px 10px 10px 5px;
}
.join{
color: silver;
}
.list-num{
  color: red;
  font-weight: 700;
}
.list-info{
  color: silver;
  font-size: 12px;
}

index.wxml

javascript 复制代码 
<!--index.wxml-->
<view>
  <swiper indicator-dots="true" autoplay="true">
<block wx:for="{{imgSrcs}}" wx:key="*text">
  <swiper-item>
    <image src="{{item.img}}"></image>
  </swiper-item>
</block>
</swiper>
</view>
<view class="mobi-title">
    <text class="mobi-icon"></text>
    <text>会议信息</text>
</view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-img">
            <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text></view>
            <view class="list-tag">
                <view class="state">{{item.state}}</view>
                <view class="join"><text class="list-num">{{item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{{item.location}}</text>|<text>{{item.starttime}}</text></view>
        </view>
    </view>
</block>
<view class="section bottom-line">
		<text>到底啦</text>
</view>

效果图

总结

本篇博客深入介绍和讨论了Flex弹性布局、轮播图mock遍历数据和首页布局这三个前端技术主题。我们通过详细的解释和实例演示，帮助读者更好地理解和应用这些技术。希望本篇博客能对您在前端开发中有所帮助！

相关推荐
计算机程序员小杨17 分钟前
计算机专业的你懂的：大数据毕设就选贵州茅台股票分析系统准没错|计算机毕业设计|数据可视化|数据分析
java·大数据
y1y1z21 分钟前
EasyExcel篇
java·excel
DokiDoki之父41 分钟前
多线程—飞机大战排行榜功能（2.0版本）
android·java·开发语言
阳光阴郁大boy1 小时前
一个基于纯前端技术实现的五子棋游戏，无需后端服务，直接在浏览器中运行。
前端·游戏
高山上有一只小老虎1 小时前
走方格的方案数
java·算法
whatever who cares1 小时前
Java 中表示数据集的常用集合类
java·开发语言
石小石Orz1 小时前
效率提升一倍！谈谈我的高效开发工具链
前端·后端·trae
EndingCoder1 小时前
测试 Next.js 应用：工具与策略
开发语言·前端·javascript·log4j·测试·全栈·next.js
xw51 小时前
免费的个人网站托管-PinMe篇
服务器·前端
！win ！1 小时前
免费的个人网站托管-PinMe篇
前端·前端工具
热门推荐
01UV安装并设置国内源02Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code03DeepSeek更新！速览DeepSeek V3.1新特性04蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接05KGG转MP3工具|非KGM文件|解密音频06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）072025最新国内服务器可用docker源仓库地址大全（2025年8月更新）08阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践