微信小程序开发教程-从零开始（2）

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

首先咱们建立一个详情的界面所需的文件,以下图所示:

详情页的话，咱们暂时随便搭建一下，主要是看下怎么作跳转。
首先咱们在详情页面随便写点东西，代码以下：

<!--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"时，没有点击态效果.完整的代码以下图框起来的地方

运行一下，能够瞧瞧效果以下。

由图能够看出跳转的功能已经作好了，下面咱们开始优化一下首页的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，咱们运行一下看看效果图片是否已经改变了。

相对于咱们的效果图的图片部分，应该已经差很少就是这个样子了，下面让咱们再调一调标题以及其余部分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;
}复制代码

最后咱们运行一下看下结果如何：

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

本文为Bison原创，转载请注明出处，不然将追究法律责任

首发连接
第一时间收到文章推送