首页 > 小程序教程 > 微信小程序限时折扣活动列表页设计制作开发教程

微信小程序限时折扣活动列表页设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序限时折扣活动列表页设计制作开发教程,制作好以后效果图如下:
一、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));
    }
})

模板简介:该模板名称为【微信小程序限时折扣活动列表页设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 21,389次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-18
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信文章 单页式简历模板 响应式 微信图片 微信公众平台 微信素材 html5 自适应 企业网站 微信模板
您可能会喜欢的其他模板