应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

IOS开发者试水:微信小程序开发教程-从零开始(2)

发布时间:2024-01-01 00:00 浏览次数:33

这篇文章我将传授列表的页面以及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;


}


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

TAG标签:
阅读推荐