微信小程序开发教程-从零开始(2)

微信小程序开发教程-从零开始(1)中我们学会了怎么搭建一个微信小程序的框架以及显示一个文章列表,这篇文章我将讲解列表的点击以及UI的优化,达到一个我们预期的一种效果。

首先我们创建一个详情的界面所需的文件,如下图所示:

allluckly.cn

详情页的话,我们暂时随便搭建一下,主要是看下怎么做跳转。 首先我们在详情页面随便写点东西,代码如下:

<!--detail.wxml-->
<view class="container">
666666
</view>

这样的话在外面的详情页会显示666666这些个字样,然后我们在index.wxml中写跳转的代码,主要代码如下:

<navigator url="navigate?title=navigate" hover-class="navigator-hover">
跳转到新页面
</navigator>

其中url为应用内的跳转链接title=navigate为传过去的字段hover-class指定点击时的样式类,当hover-class="none"时,没有点击态效果.完整的代码如下�图框起来的地方

blog.allluckly.cn

运行一下,可以瞧瞧效果如下。

Untitled.gif

由图可以看出跳转的功能已经做好了,下面我们开始优化一下首页的UI 优化UI 的话主要是在index.wxss中,根据每个控件的class名来写相应的设置。 首先我们把整个页面做一下设置,代码如下:

/**index.wxss**/
.list {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

padding为内边框,首页整个的class名为list,所以用.list{}来设置。然后设置一下navigator块,再然后来设置我们的每一个列表,在这里我把它命名为cell,看上去对于iOS开发来说亲切一点。具体代码如下:

navigator{ overflow: hidden;}

.cell{
  margin-bottom:  20rpx;
  height: 200rpx;
  position: relative;
}

再然后我们设置cell中图片的位置,具体代码如下:

.imgs{
  float: right;
}
.imgs image { 
  display: block;
  width: 200rpx;
  height: 200rpx;
}

由代码可以看出,我们的图片设置了向右对齐,宽和高分别设置了200rpx,我们运行一下看看效果图片是否已经改变了。

blog.allluckly.cn.png

相对于我们的效果图的图片部分,应该已经差不多就是这个样子了,下面让我们再调一调标题以及其他部分UI 的调试。 我们把其他部分的UI都放在class="infos"; 首先我们先调这一大块的布局,代码如下:

.infos {
  float: left; 
  width: 480rpx;
  height: 200rpx;
  padding: 20rpx 0 0 20rpx;
}

然后设置里面的每一个小部件,代码如下:

.title {font-size: 20px;}

.date {
  padding-top: 50rpx;
  float: right;
  font-size: 16px;
  color: #aaa;
  position: relative;

}
.classification{
  padding-top: 50rpx;
  font-size: 16px;
  color: #aaa;
  position: relative;
}

最后我们运行一下看下结果如何:

blog.allluckly.cn.gif

有空的话再写写网络请求方面的,结合这个demo

本文为Bison原创,转载请注明出处,否则将追究法律责任

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏QQ会员技术团队的专栏

一起脱去小程序的外套和内衣:微信小程序架构解析

微信小程序的公测掀起了学习小程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,小程序给开发者带来了很多惊喜。通过这篇文章和大家一起...

5.9K30
来自专栏coding for love

浏览器为契机贯穿前端知识点-大纲参考

ps:动画不连贯,因为浏览器渲染有一个最小时间间隔(这块之前搜藏了) 涉及如下部分:

9210
来自专栏游戏杂谈

HTML5的Histroy API

比较典型的是GitHub,在点击代码文件夹和文件时,会发现它的url地址栏变换了、标题栏变化了、前进后退按钮也变化了(跟新开了一个新页面感觉一样),但体验起来很...

21530
来自专栏猿人谷

ubuntu的美化

一、Usplash画面(开机/启动画面) 它就相当于Windows的开机/启动画面,因为 ubuntu 使用usplash这个软件作为启动画面,所以我们就叫它为...

25490
来自专栏DeveWork

为WordPress 评论框添加HTML5 表单验证

WordPress 中最常用到的表单莫过于评论框了,但现在不少的WordPress 主题(包括WordPress官方的主题),其表单验证其实是借助javascr...

404100
来自专栏Coding01

推荐简约漂亮的小程序日历插件

好比 PHP 的 composer、前端的 npm,Java 的 jar包,小程序插件的出现,极大的方便了我们共享组件,减小开发量。

94420
来自专栏韩东吉的Unity杂货铺

零基础入门 3: 窗口介绍(一)

前两篇介绍了Unity的环境布置,破解,平台切换。如果哪里有所遗忘可以翻看历史消息重新巩固下。

13730
来自专栏娱乐心理测试

小程序如何引入外部字体(方法详解)

2.6K50
来自专栏PHP在线

表单提交刷新页面问题

今天开发中遇到了一个问题,刚开始没有头绪,不知道怎样解决,后来静下来一想,搜索下吧,经过搜索相关资料,很好的解决。 <form name="keywordFor...

38960
来自专栏前端布道

前端开发必备之chrome插件

Chrome浏览器目前是网络上可用的最好的浏览器之一,并且自2011年11月超越了Firefox浏览器之后,已经成为了互联网上占主导地位的浏览器。 本篇文章将与...

48860

扫码关注云+社区

领取腾讯云代金券