本文给大家带来的是微信小程序限时折扣活动列表页设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="active_block">
<view class="active_item_title">
<view class="active_title_wrap">
<view class="active_title">限时折扣</view>
</view>
</view>
<view class="active_item">
<view>
<image bindload="cusImageLoad" src="../../image/test.jpg" style="width: {{imageWidth}};height: {{imageHeight}}"></image>
</view>
<view class="active_goods_name">
大保健营养保健品适合老年人和婴幼儿易吸收营养好吃的
</view>
<view class="active_item_infor">
<text class="active_new_price">¥95</text>
<text class="active_old_price">¥190</text>
<text class="active_time">还剩1天20小时</text>
</view>
</view>
<view class="active_item">
<view>
<image bindload="cusImageLoad" src="../../image/test.jpg" style="width: {{imageWidth}};height: {{imageHeight}}"></image>
</view>
<view class="active_goods_name">
大保健营养保健品适合老年人和婴幼儿易吸收营养好吃的
</view>
<view class="active_item_infor">
<text class="active_new_price">¥95</text>
<text class="active_old_price">¥190</text>
<text class="active_time">还剩1天20小时</text>
</view>
</view>
</view>
<view>
<view class="active_item_title">
<view class="active_title_wrap">
<view class="active_title">参加团购</view>
</view>
</view>
<view class="active_item">
<view>
<image bindload="cusImageLoad" src="../../image/test.jpg" style="width: {{imageWidth}};height: {{imageHeight}}"></image>
</view>
<view class="active_goods_name">
大保健营养保健品适合老年人和婴幼儿易吸收营养好吃的
</view>
<view class="active_item_infor">
<text class="active_group_price">团购价¥90</text>
<text class="active_time">三人团</text>
</view>
</view>
<view class="active_item">
<view>
<image bindload="cusImageLoad" src="../../image/test.jpg" style="width: {{imageWidth}};height: {{imageHeight}}"></image>
</view>
<view class="active_goods_name">
大保健营养保健品适合老年人和婴幼儿易吸收营养好吃的
</view>
<view class="active_item_infor">
<text class="active_group_price">团购价¥80</text>
<text class="active_time">四人团</text>
</view>
</view>
</view>
|
二、wxss样式文件代码如下：
.active_item_title{
padding: 15px;
background-color: #FFF;
}
.active_title_wrap {
text-align: center;
padding-bottom: 2px;
border-bottom: 1px solid #000;
width: 80px;
margin: 0 auto;
}
.active_title {
display: inline-block;
font-size: 14px;
padding: 0 10px;
padding-bottom: 5px;
border-bottom: 3px solid #000;
font-weight: 700;
}
.active_goods_name {
background-color: #FFF;
padding: 7px 10px;
font-size: 14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.active_item_infor {
background-color: #FFF;
font-size: 14px;
padding: 0 10px;
padding-bottom: 10px;
}
.active_new_price {
color: #FF0000;
}
.active_old_price {
font-size: 12px;
text-decoration: line-through;
margin-left: 5px;
}
.active_time {
float: right;
font-size: 12px;
}
.active_block {
margin-bottom: 10px;
}
.active_group_price {
font-size: 12px;
color: #FF0000;
}
|
三、js页面代码如下：
var WxAutoImage = require("../../js/wxAutoImageCal.js");
var app = getApp();
Page({
data: {
},
cusImageLoad: function(e){
var that = this;
that.setData(WxAutoImage.wxAutoImageCal(e));
}
})
|
.jpg)
.jpg)
