1.微信小程序圓角樣式
border-radius: 20rpx;
2.微信小程序橫向佈局
display: flex;
/*row 橫向 column 列表 */
flex-direction: row;
/* 左右居中 */
justify-content: center;
/* 上下居中 */
align-items: center;
3.文字左右佈局
父元素用到：justify-content:space-between;
子元素：
<view style="text-aligin:left;padding-left:20rpx;">我發起的團購</view>
<view style="text-aligin:right;padding-right:20rpx;">發起</view>
4.微信小程序文字懸浮圖片上方
<view class="img-parent">
<image src="{{}}" mode='widthFix' class="list-pic"></image>
<view class="child" wx:if="{{item.isEnd ==false}}">
活動還剩2天
</view>
<view class="child_end" wx:if="{{item. isEnd ==true}}">
活動結束了
</view>
</view>
樣式部分：
.img-parent{
height: 300rpx;
width: 330rpx;
position: relative;
}
.child {
width: 100px;
height: 50rpx;
position: absolute;
left: 130rpx;
top: 10rpx;
margin: auto;
text-align: center;
background: yellowgreen;
border-top-left-radius: 15px;
border-bottom-left-radius:15px;
}
.child_end {
width: 100px;
height: 50rpx;
position: absolute;
left: 130rpx;
top: 10rpx;
margin: auto;
text-align: center;
background: gray;
border-top-left-radius: 15px;
border-bottom-left-radius:15px;
}
5.微信小程序bindtap跳轉頁面
<view bindtap="test">跳轉</view>
js部分
test:function(){
wx.navigateTo({
url: ''
})
}