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

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

<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: 20%;
  height: 50px;
  border: solid 1px #000;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  line-height: 50px;
}

.shopmore {
  padding: 0 20rpx;
  display: flex;
  flex-wrap: wrap;
}

.shopmore .shopborder {
  width: 50%;
  background-color: #fff;
  padding-top: 20rpx;
  margin-top: 20rpx;
  margin-right: 10rpx;
  margin-left: 10rpx;
  flex: 1;
}

.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: 2;
  /* 行数 */
  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; /* //删除线 */
}

//index.js
const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: '',
    shopDate: [{
        imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/741/112/8261211147_533971270.220x220.jpg', title: '花梨木茶桌椅组合 古典红木家具刺猬紫檀泡茶桌 实木仿古茶台', much: '469.00', oldMuch: '899.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2019/987/844/11233448789_400813907.220x220.jpg', title: '新中式功夫泡茶桌茶台整套茶室家具 马蹄脚实木茶桌椅组合可定制', much: '396.00', oldMuch: '799.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/932/318/10226813239_1341384597.220x220.jpg', title: '北欧实木床1.8米双人床主卧1.5m日式简约现代橡木小户型经济型床', much: '899.00', oldMuch: '1399.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/720/089/9319980027_982697456.220x220.jpg', title: '批发客厅实木家具 沙发组合套装1+2+3橡胶木实木沙发', much: '8999.00', oldMuch: '13599.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/720/089/9319980027_982697456.220x220.jpg', title: '批发客厅实木家具 沙发组合套装1+2+3橡胶木实木沙发', much: '8999.00', oldMuch: '13599.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/720/089/9319980027_982697456.220x220.jpg', title: '批发客厅实木家具 沙发组合套装1+2+3橡胶木实木沙发', much: '8999.00', oldMuch: '13599.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/720/089/9319980027_982697456.220x220.jpg', title: '批发客厅实木家具 沙发组合套装1+2+3橡胶木实木沙发', much: '8999.00', oldMuch: '13599.00' }, { imgUrl: 'https://cbu01.alicdn.com/img/ibank/2018/720/089/9319980027_982697456.220x220.jpg', title: '批发客厅实木家具 沙发组合套装1+2+3橡胶木实木沙发', much: '8999.00', oldMuch: '13599.00' } ] }, })

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

 

<view class="box_F">
  <view class="box_S">
    <text>欢迎来到我的页面。。。</text>
  </view>
</view>

.box_F {
  margin-top:100px;
  border: solid 1px #000;
  width: 100%;
  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: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  margin-bottom: 6rpx;
}

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

 

转载于:https://www.cnblogs.com/DreamchaserHe/p/11303576.html