IOS开发者试水：微信小程序开发教程-从零开始（2）

这篇文章我将传授列表的页面以及UI的优化，达至一个我们预期的一种效果。

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

详情页的话，我们暂时随便构建一下，主要就是看看怎么做重定向。

首先我们在详情请页面随便写下点东西，代码如下：

666666

这样的话在外面的详情页可以表明666666这些个字样，然后我们在index.wxml中写下重定向的代码，主要代码如下：

重定向至新页面

其中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;

}

最后我们运转一下看看下结果如何：