个人信界面设计效果
个人信息界面页面布局
页面布局相较于登录界面更复杂,不适合所有元素使用绝对定位,由于小程序自带有chrome的内核,所以不用对不同浏览器进行适配,适用flex布局:http://www.runoob.com/w3cnote/flex-grammar.html
- 遇到的样式问题:
由于分享api需要通过按钮的open-type=share入口进入所以右上角的分享需要是按钮组件,但是当背景设置为透明和边框为0px后仍然会有细小的边框出现:
细小的边框
解决这个问题的方法是在wxml中对button增加plain属性为true,并设置无边框样式:
//设置后解决有边框的问题
<button open-type='share' plain='true' style="border:none">分享 </button>
- 排行榜代码
<scroll-view scroll-y='true' class='ranklistviewall'>
//三个金银铜的奖牌图片,使用绝对定位
<image class="ranknumiconimg goldicon" src='../../images/anwser/gold_medal@2x.png'></image>
<image class="ranknumiconimg silvericon" src='../../images/anwser/silver_medal@2x.png'></image>
<image class="ranknumiconimg bronzeicon" src='../../images/anwser/bronze_medal@2x.png'></image>
//block循环组件:每一个排行榜上的人的信息
<block wx:for="{{ranklist}}" wx:key='{{index}}'>
<view class='ranklistview' >
<view class='ranknum' >{{index+1}}
</view>
<view class='rankuserinfo'>
<view class='rankavatar'>
<image src="{{item.avatar}}"></image>
</view>
<view class='ranktext'>
<view class='ranknickname'>{{item.nickname}}</view>
<view class='rankcomefrom'>来自:{{item.city}}</view>
</view>
</view>
<view class='cupnum'>
<image class="cupicon" src='../../images/anwser/cup_icon.png'></image>
<text>{{item.trophy_count}}</text>
</view>
</view>
</block>
</scroll-view>
因为屏幕大小有限,所以使用scroll-view的滚动view。
{{ranklist}}是一个数组,每一个元素是排行榜上的人的排名及其详细信息。
<block>通过wx:for=属性遍历得到多个view,这是在小程序开发中遇到的很便利的一点:不用通过JS拼接html代码。
网友评论