2020//7/6学习记录

日常记录，非技术型分享，有错误希望大家帮我指正

 

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: ''

   })

}