一、常用商品列表的换行排布
<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; }
注：以上所有内容都是自学，如果有不对的地方，还请指点，在这里谢谢了。
