小程序新闻列表页面布局代码_论坛小程序·“我的”页面布局

这次让我们来看看界面是怎么布局的吧！

比如打开模拟器里“我的”页面，找到其所对应的me文件夹里的文件

打开me.wxml

查看第一段代码，发现其中包含五个view类，他们的属性标签分别是：class='amountBg'、class='img'、class='account'、class='nick-name'、class='address'，

对应着背景、头像、账号、昵称、地址五个方面。他们之间的包含关系也不难看出。

View是一个视图容器，它可以展示一些内容，我们通过对他的属性进行标记来区分，并通过对应的wxss文件修改其样式。

比如对于第一个view类amountBg，我么打开me.wxss文件，看到第一段代码

wxss是按照css的格式来的，代码的编写标准可以参考这个：http://css.cuishifeng.cn/index.html。

遇到不懂的可以在里面查，比较方便。大概说一下上面这段的意思：

display: flex——设置为弹性伸缩

flex-direction: row——横向从左到右排列

height: 100px——高度为100px，px是尺寸单位

background-color: #5495e6——背景颜色，具体颜色代码我在第一篇里说了网址，也可以百度搜，这里再给一个http://cha.buyiju.com/tool/color.html。

align-items: center——弹性盒子元素在该行的纵轴上居中放置。

遇到其他不懂的去查代码标准的那个网址就是了。

在第二个view类img中我们可以看到其中包含了一个叫open-data的类。

Open-data是一个开放的框架，它可以直接显示用户的基础数据而不用经过用户授权，常用在不需要把用户数据传到后台数据库的时候。

它使用type来表示不同的含义：

zh_CN是简体中文的意思。

具体文档在这里：https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

第一部分看完了，来看一下第二部分

重点说一下收藏列表的实现：

这里新出现了两个东西，bindtap属性和image类

这个bindtap表示当用户点击时，触发onCollectClick事件，而这个事件在me.js里定义了，我们看一下：

发现是一个跳转到新页面的功能。me.js是小程序的逻辑关系，下次再说。

Image类是展示图片的方法，其中src表示要展示图片的相对路径。

"./" 代表当前文件夹。

“../”表示当前文件夹的上一级目录，即pages。

“../../“表示”再向上一层，即miniprogram文件夹。

还有一种叫绝对路径，比如C:WindowsSystem32，但一般不用。

这里看到image类还有一个style属性来规定图片大小，其实就是修改样式，和wxss的功能一样。

只不过为了省事，有时候直接在wxml里写了，你也可以给这个image定一个“class = tupian “这种，然后在wxss里编写tupian这个class的样式，最后是一样的效果。

先说这么多，是不是有点啰嗦哈哈哈，下次再说js文件。

小程序新闻列表页面布局代码_论坛小程序·“我的”页面布局相关推荐

程序员女朋友礼物python代码_一位程序猿送给女朋友的礼物
背景一个月前发现了V2EX这个网站,用创始人Livid的话来说,『这是一个主要关于做事儿的地方』.确实如此,我在这里收获了很多想法和灵感. 本文所记的,也是得益于某天的对某个主题的浏览.帖子中,大家 ...
微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序新闻列表功能（读取文件、template）
微信小程序新闻列表功能(读取文件.template) 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件,和 post.js 文件中,某些键值对键 ...
微信小程序新闻列表及详情页
微信小程序新闻列表及详情页页面效果新闻列表 <view class="conatiner"><view class="news-item" ...
php做新闻列表,php 静态新闻列表自动生成代码如何实现
很多php 教程中都有介绍,这里只提供例子. /** * php 静态新闻列表自动生成代码 * site www.jbxue.com */ function CreateShtml() { ob_s ...
php自动生成新闻页,PHP静态新闻列表自动生成代码
PHP静态新闻列表自动生成代码 2021-01-23 11:47:097 functionCreateShtml() { ob_start(array("callback_CreateSht ...
c++小程序代码_# 微信小程序的原生框架和taro对比 ##
微信小程序的原生框架和taro对比小程序历史(为什么会出现?) 2007年 iPhone H5 大家知道现在手机端主要是iOS.Android两大系统,实际上在早期有3大系统竞争,还有一个就是诺基亚 ...
使用js原生代码实现类似新闻列表的滚动题目来自4399小游戏2020年前端笔试编程题
新闻列表的滚动循环播放 html代码 CSS代码 Script代码总结题目要求: 要求实现以下页面,其中列表项是滚动循环播放的,而且每次只显示3个,当鼠标经过的时候停止播放,鼠标离开继续播放 co ...
小程序分享到朋友圈功能_微信小程序开放分享到朋友圈功能
2020年7月7日(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序"分享到到朋友圈",这个看似微小的变化,对微信小程序来说意义重大. 用fenng大的话说 ...

小程序新闻列表页面布局代码_论坛小程序·“我的”页面布局

小程序新闻列表页面布局代码_论坛小程序·“我的”页面布局相关推荐

最新文章

热门文章