小程序学习之用户信息页面开发

效果图如下:

小程序学习之用户信息页面开发

代码如下:

<!--pages/user/user.wxml-->
<view style=‘display:flex;flex-direction:column;align-items:center‘>
  <image src="http://n.sinaimg.cn/front/95/w2048h2047/20190331/9Ih3-huxwryw4121627.jpg" style="width:50px;height:50px;"/>
  <text>text</text>

   <view style=‘margin-bottom:15px;padding:5px;width:100%;border:1px solid‘>
    <view style=‘margin-top:10px;margin-bottom:10px;‘>
      <text style=‘font-size:20px;color:#353535‘>这是标题</text>
    </view>
    <view style=‘display:flex;justify-content:space-between‘>
      <text style=‘font-size:18px;color:#888888‘>10条回复</text>
      <text style=‘font-size:18px;color:#888888‘>节点</text>
    </view>
  </view>

  <view style=‘margin-bottom:15px;padding:5px;width:100%;border:1px solid‘>
    <view style=‘margin-top:10px;margin-bottom:10px;‘>
      <text style=‘font-size:20px;color:#353535‘>这是标题</text>
    </view>
    <view style=‘display:flex;justify-content:space-between‘>
      <text style=‘font-size:18px;color:#888888‘>10条回复</text>
      <text style=‘font-size:18px;color:#888888‘>节点</text>
    </view>
  </view>
</view>

  

 

小程序学习之用户信息页面开发

上一篇:微信和支付宝中的一些常用方法封装


下一篇:微信中提示在浏览器中打开