大家好，又见面了，我是你们的朋友全栈君。
日常记录，非技术型分享，有错误希望大家帮我指正
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: ”
})
}
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/171052.html原文链接：https://javaforall.cn
