◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
简单搞了一下,吼吼~:
1234567891011121314151617181920212223242526272829 |
//index.js//获取应用实例var app = getApp()Page({data: {motto: 'Hello World',userInfo: {name:'汗青',
desc:"前端的春天来了!\n 前端要烂大街了!!",
avatarUrl:"http://img2.3lian.com/2014/gif/10/9/25.jpg"}
},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onLoad: function () {console.log('onLoad')var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){//更新数据that.setData({userInfo:userInfo})that.update()})}}) |
wxml:创建布局
123456789101112 |
<!--index.wxml--><view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-name">{{userInfo.name}}</text>
<text class="userinfo-desc">{{userInfo.desc}}</text>
</view><view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view></view> |
wxss:设置样式
1234567891011121314151617181920212223242526272829 |
/**index.wxss**/.userinfo {display: flex;flex-direction: column;align-items: center;}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;}.userinfo-name {color: #aaa;font-size: 30rpx;margin: 30rpx;}.userinfo-desc {color: #f00;font-size: 50rpx;line-height: 70rpx;}.usermotto {margin-top: 200px;} |
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。