代码:
代码一:
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
</view>
<view>
<text class="userinfo-nickname">{{userInfo.nickName}}(Dunizb)</text>
</view>
<view class="usermotto">
<!--<text class="user-motto">{{motto}}</text>-->
<button type="default" size="{{primarySize}}" plain="{{plain}}" hover-class="button-hover"
disabled="{{disabled}}" bindtap="toCalc"> {{motto}} </button>
</view>
<view>
<navigator url="view" class="github" hover-class="navigator-hover">
<icon type="{{iconType}}" class="icon" size="20"/>GitHub
</navigator>
</view>
</view>
代码二:
/**index.wxss**/
.userinfo {
/*display: flex;*/
/*flex-direction: column;*/
/*align-items: center;*/
/*width:256rpx;*/
/*height: 512rpx;*/
}
.userinfo-avatar {
width: 128px;
height: 128px;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
margin-top:80px;
}
.usermotto {
margin-top: 35%;
}
/** 修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}
/** 修改默认的navigator点击态 **/
.navigator-hover {
color:blue;
}
.github{
color: green;
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.icon{
vertical-align: middle;
margin-right: 2px;
}
代码三:
<view class="github-info">
<view>微信小程序不支持跳转第三方网页</view>
<view>手动复制GitHub地址吧:</view>
<view class="url">https://github.com/dunizb/wxapp-sCalc</view>
</view>
<view class="github-info">
<view>另外,如果你不喜欢计算器,我还做了一个豆瓣电影的微信小程序</view>
<view>GitHub地址:</view>
<view class="url">https://github.com/dunizb/wxapp-movie</view>
</view>
代码四:
.github-info{
padding: 10px 5px;
font-size: 16px;
font-family: "Microsoft YaHei";
line-height: 20px;
margin-bottom: 10px;
}
.url{
color: blue;
}
代码执行:
代码执行后效果图: