美文网首页
个人信息页面

个人信息页面

作者: 地瓜一枚 | 来源:发表于2018-12-27 10:33 被阅读0次

个人信界面设计效果

个人信息界面

页面布局

页面布局相较于登录界面更复杂,不适合所有元素使用绝对定位,由于小程序自带有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代码。

相关文章

  • 不同地方跳转到一个页面,出现不同情况的问题

    自己遇到的一个问题,首页和其它页面跳转到个人信息页面,出现了不同的情况 原因: 个人信息页面我用到了故事版, 首页...

  • 个人信息页面

    个人信界面设计效果 页面布局 页面布局相较于登录界面更复杂,不适合所有元素使用绝对定位,由于小程序自带有chrom...

  • 常见的数据交互之跳转页面传值

    1:跳转到另外一个页面,把参数带到另外一个页面, 1:获取注册时候缓存在sessionStorage的个人信息, ...

  • 写一个可以快速弹出多种滚轮选择器(PickerView)的小工具

    使用这个小框架可以快速的完成注册页面或者个人信息页面的选择项 使用示例效果 TextField使用示例 按钮使用示...

  • 关于在「天下丛林」报名禅修课程的问题回复

    关于报名网站的问题回复: 注册后报名前,需补全个人信息,补全信息的页面冗长,字段过多,如下所示:补全信息页面如果全...

  • 接口文档

    user 接口一:展示个人信息详细页面GET传递给后台的参数: phone(String)传递给客户端的参数:ni...

  • 开发小妙招(二)

    如何解决嵌套跳转或者跳转一个新页面之后,前一个页面下消失 举个大家都见过的例子,微信跳个人信息,然后发消息进入消息...

  • 沈亮的简历

    个人信息 沈亮 / 男 / 25 本科 / 四川师范大学 期望职位:初级前端开发、页面重构 期望城市:长沙 Git...

  • oAuth 2.0 第三方登录详细介绍

    本文以github第三方登录为例,详细介绍oAuth 2.0登录过程。 注册github账号,登录后在个人信息页面...

  • layui弹出from表单

    点击个人信息弹出 1. 首先是页面的点击弹出事件。 2. 当点击弹出窗口之后,请求controller来渲染for...

网友评论

      本文标题:个人信息页面

      本文链接:https://www.haomeiwen.com/subject/wcyzkqtx.html