微信小程序简单DEMO布局，逻辑，样式的练习

作者：落了个小妞农_602 | 来源：互联网 | 2022-10-12 17:21

这篇文章主要介绍了微信小程序简单DEMO布局，逻辑，样式的练习的相关资料,这里写一个简单实例练习小程序的布局，并附实例代码和实现效果图，需要的朋友可以参考下

微信小程序布局实例：

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

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

1.布局的实现

最大的布局是view， view布局中包含了：一张图片，文字描述，信息栏和分界线



  
  
    
  

  
  小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物

  
   
    
      

       22
    
    2016.10.29
  

  
  






  
  
    
  

  
  小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物

  
   
    
      

       22
    
    2016.10.29

2.逻辑的实现

只是注册了Page界面

Page({

  data:{

  }

})

3.样式的实现

.home-view1样式：display规定最大View布局为弹性布局，justify-content规定内容居中，竖直排列, …

.home-view3样式：display规定了信息栏布局为弹性布局，justify-content规定内容水平平均分配

.home-view4样式：display规定了收藏图片和收藏数的父布局为弹性布局，align-items规定内容在竖直方向居中

.home-image1样式：规定图片的高度

.home-image-heart样式：规定收藏图片的大小

.home-text1样式：规定描述文字的样式，text-align规定文字居中，line-height规定两行文字之间的高度

.home-text-heart样式：规定收藏数的样式，border-radius规定边界圆角

.home-view-line样式：是一条分界线

.bgColor样式：规定收藏数的背景

.home-view1{
  display: flex;
  justify-content: center;
  flex-direction: column;

  height: 100%;
  width: 100%;
  margin: 6px;

}

.home-view3{
  display: flex;
  justify-content: space-between;
}

.home-view4{
  display: flex;
  align-items: center;
}

.home-image1{
  height: 200px;
}

.home-image-heart{
  width: 30px;
  height: 30px;
}

.home-text1{
  text-align: left;
  line-height: 25px;
  margin-top: 6px;
  margin-right: 6px;
  color: gray;
}

.home-text-heart{
  width: 22px;
  height: 22px;
  margin-left: 10px;
  border-radius: 20%;
  pad: 5px;
  text-align: center;
}

.home-text-time{
  text-align: center;
  margin-right: 20px;
  padding-top: 5px;
  color: gray;
}

.home-view-line{

 width: 100%;
 height: 6px;
 margin-top: 5px;
 background-color: gainsboro;
}

.bgColor{
  background-color: lightblue;
  opacity: 0.6;
}

4.效果图

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

推荐阅读

php
微信小程序新手教程wx.request(object) API

微信小程序新手教程wx.request(object)API，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧wx.request(object)API这里通过干活集中营的A ... [详细]

蜡笔小新 2023-10-11 19:40:57
random
微信小程序支付JAVA后台逻辑

MathJax.Hub.Config({showMathMenu:false}); ... [详细]

蜡笔小新 2023-10-13 11:49:53
random
微信小顺序：音乐播放器

近来终究做了第一个微信小顺序，是音乐类的运用，所以音乐播放器必不可少。由于运转环境的限定，没有现成的轮子，只能本身重新造一个了。功用清单基本功用：播放，停息，进度，住手扩大功用：播 ... [详细]

蜡笔小新 2023-10-13 11:46:27
random
微信小程序Demo导入的示例分析

小编给大家分享一下微信小程序Demo导入的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有 ... [详细]

蜡笔小新 2023-09-25 12:14:11
php
微信小程序适合做什么？微信小程序详情介绍

微信小程序是腾讯新开发的功能，目前备受关注的，还有很多用户不是很了解，不知道这个微信小程序适合什么，因此就让小编给大家讲讲吧。微信小程序详情介绍小程序也有很多功能，如果你按照之前的 ... [详细]

蜡笔小新 2023-09-25 11:14:32
php
Java swing 连连看小游戏开发小系统项目源代码实训实验毕设

Javaswing连连看小游戏开发小系统项目源代码实训实验能满足学习和二次开发可以作为初学者熟悉Java的学习，作为老师阶段性学习的一个成功检验不再是单调的理解老师空泛的知识，导入 ... [详细]

蜡笔小新 2024-11-12 10:14:33
php
黄文俊：Serverless小程序后端技术分享

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~黄文俊，现任腾讯云SCF无服务器云函数高级产品经理，多年企业级系统开发和架构工作经验，对企业级存储、容器平台、微服务架构、无服务器计 ... [详细]

蜡笔小新 2023-10-12 19:41:44
php
小程序组件超过屏幕问题及禁止页面下拉

1.有事会出现小程序的页面超出屏幕，导致横向和纵向溢出，这时候在wxss文件中加入overflow:hidden来隐藏溢出屏幕的部分。.container{background:# ... [详细]

蜡笔小新 2023-10-12 18:00:02
php
微信小程序API 音频-暂停播放-微信小程序

微信小程序API音频-暂停播放是千自学中一篇关于微信小程序的文章简介:wx.pauseVoice(Objectobject)从基础库 1.6.0 开始，本接口停止维护，请使用 wx.createInnerAudioContext 代替暂停正在播放的语 ... [详细]

蜡笔小新 2023-10-12 14:26:00
require
微信小程序中如何实现轮播图

这篇文章主要介绍了微信小程序中如何实现轮播图，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带 ... [详细]

蜡笔小新 2023-10-12 12:21:30
require
微信小程序开发如何实现地图功能

这篇文章主要讲解了“微信小程序开发如何实现地图功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研 ... [详细]

蜡笔小新 2023-10-11 18:22:39
require
微信小程序实战之菜谱小程序

最近突发奇想，想要自己搞个小程序玩儿玩儿，但是鉴于自己是搞后端服务器出身，对于偏前端的微信小程序开发实在是一知半解，尤其是对于css类样式相关，更是无从下手，于是乎，只能从晚上找了 ... [详细]

蜡笔小新 2023-09-25 21:24:15
require
自己怎么弄微信小程序

本文主要介绍关于微信小程序,小程序,今日头条,新闻,前端的知识点，对【仿今日头条实时新闻微信小程序项目源码】和【自己怎么弄微信小程序】有兴趣的朋友可以看下由【叶绿体不忘呼吸】投稿的技术文章，希望该技术 ... [详细]

蜡笔小新 2023-09-25 12:12:10
require
小程序“自定义关键词”功能的常见问答

　　我们知道小程序可以通过线下扫码、公众号、好友分享、长按小程序码、搜索小程序名称来找到，现在又多了一个新方式——小程序后台新增自定义关键词功能：已发布小程序的开发者，可提交最多10个与小程序业务相关 ... [详细]

蜡笔小新 2023-09-25 09:51:31
list
微信小程序地图实现展示线路的方法

这篇文章将为大家详细讲解有关微信小程序地图实现展示线路的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所 ... [详细]

蜡笔小新 2023-09-25 09:16:57

落了个小妞农_602

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章