微信小程序开发--常用开发实例

一、常用商品列表的换行排布

<view class="box_max">

  <view class="box_min">限时秒杀</view>

  <view class="box_min">断码清仓</view>

  <view class="box_min">品牌馆</view>

  <view class="box_min">多多果园</view>

  <view class="box_min">9块9特卖</view>

  <view class="box_min">充值中心</view>

  <view class="box_min">百亿补贴</view>

  <view class="box_min">现金签到</view>

  <view class="box_min">金猪赚大钱</view>

  <view class="box_min">电器城</view>

</view>

<view class="shopmore">

  <view class="shopborder" wx:for="{{shopDate}}" wx:key="index">

    <image src="{{item.imgUrl}}"></image>

    <text class="Textover">{{item.title}}</text>

    <text class="Textcolor">￥{{item.much}}</text>

    <text class="Textsub">￥{{item.oldMuch}}</text>

  </view>

</view>

.box_max {

  display: flex;

  flex-wrap: wrap;

}

.box_min {

  width: %;

  height: 50px;

  border: solid 1px #;

  box-sizing: border-box;

  font-size: 14px;

  text-align: center;

  line-height: 50px;

}

.shopmore {

  padding:  20rpx;

  display: flex;

  flex-wrap: wrap;

}

.shopmore .shopborder {

  width: %;

  background-color: #fff;

  padding-top: 20rpx;

  margin-top: 20rpx;

  margin-right: 10rpx;

  margin-left: 10rpx;

  flex: ;

}

.shopmore .shopborder image {

  width: 300rpx;

  height: 300rpx;

}

.shopmore .shopborder .Textover {

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: ;

  /* 行数 */

  font-weight: bold;

  font-size: 28rpx;

}

.shopmore .shopborder .Textcolor {

  color: red;

  font-size: 30rpx;

  float: left;

  padding-left: 20rpx;

}

.shopmore .shopborder .Textsub {

  font-size: 24rpx;

  color: #9e9e9e;

  display: inline-block;

  /* text-decoration:underline; //下划线 */

  text-decoration: line-through; /* //删除线 */

}

二、常用弹窗垂直水平居中

<view class="box_F">

  <view class="box_S">

    <text>欢迎来到我的页面。。。</text>

  </view>

</view>

.box_F {

  margin-top:100px;

  border: solid 1px #;

  width: %;

  height: 500px;

  box-sizing: border-box;

  display: flex;

  justify-content: center;

  align-items: center;

}

.box_S {

  border: solid 1px #f0f;

  width: 280px;

  height: 80px;

}

三、列表两端对齐布局

<view class="box_LM">

  <view class="box_Lf">

    <view class="box_Ls">

      <text>我的钱包</text>

    </view>

    <text>></text>

  </view>

  <view class="box_Lf">

    <view class="box_Ls">

      <text>优惠券</text>

    </view>

    <text>></text>

  </view>

  <view class="box_Lf">

    <view class="box_Ls">

      <text>我的消息</text>

    </view>

    <text>></text>

  </view>

  <view class="box_Lf">

    <view class="box_Ls">

      <text>收货地址</text>

    </view>

    <text>></text>

  </view>

  <view class="box_Lf">

    <view class="box_Ls">

      <text>意见反馈</text>

    </view>

    <text>></text>

  </view>

</view>

.box_Lf{

  font-size:14px;

  background-color: pink;

  width: %;

  height: 30px;

  line-height: 30px;

  display: flex;

  justify-content: space-between; /* 两端对齐 */

  margin-bottom: 6rpx;

}

注：以上所有内容都是自学，如果有不对的地方，还请指点，在这里谢谢了。