微信小程序简单的循环输出优惠券列表（完整小模板）

四个文件都有注释直接复制就可以用！

wxml如下：

<view><view ><block wx:for = "{{voucher}}" wx:key =''><view class="kqm" bindtap="voucher"><image class="kqimg" src="../../images/kaquan.png"></image><!-- 劵名称 --><view class="kql"><view class="knq"><text>{{item.yh_quan}}优惠券</text></view><view class="knm"><text>有效期至：{{start_time}}</text></view></view><view class="kqy"><image src="../../images/syy.png" class="kqma"></image><view class="knums"><!-- 劵的金额 --><text class="ms">{{item.money_num}}</text></view></view></view></block></view>
</view>

js部分

data: {sjc_time:'',//时间戳time:'',//系统当前时间end_time:'2019-12-31',//结束时间start_time: '2019-12-11',//开始时间yh_quan: '', //劵的名称quan_end: '', //有效期money_num: '', //劵的金额voucher: [{yh_quan: '浙江温州',quan_end: '2019-12-31',money_num: '23'},{yh_quan: '浙江温州',quan_end: '2019-23-89',money_num: '233'},{yh_quan: '浙江温州',quan_end: '2019-23-89',money_num: '233'},{yh_quan: '浙江温州',quan_end: '2019-23-89',money_num: '233'},{yh_quan: '浙江温州',quan_end: '2019-23-89',money_num: '233'},{yh_quan: '浙江温州',quan_end: '2019-23-89',money_num: '233'},],},onLoad: function(options) {console.log('进入我的卡券列表')},onReachBottom: function() {console.log('到底了');wx.showToast({title: '没有更多优惠券',icon: 'none',})},

wxss:


page{width: 100%;height: 100%;background: white;
}.rt{position: relative;width: 100%;height: 80rpx;top: 10rpx;background: white;line-height: 80rpx
}.fhm{position: absolute;margin-top: 12rpx;margin-left: 40rpx;width: 56rpx;height: 56rpx;line-height: 80rpx;/* background: red */
}.cn{margin: auto;width: 100%;height: 100%;/* background: red */
}.cm{position:absolute;left:50%;transform:translateX(-50%);
}/* 底部盒子 */
.kqm{position: relative;top: 60rpx;width: 80%;height: 240rpx;margin: auto;margin-bottom: 60rpx;border-radius: 5%;background-color: white;/* box-shadow: darkgrey 0px 0px 0px 10px; */
}.kqimg{width: 100%;height: 100%;
}.kql{position: absolute;top: 2%;left: 5%;width: 60%;height: 96%;border:#C0C0C0 1rpx;/* background: red; */text-align: center;border-right-style:dotted; /*中间虚线 */
}/* 双影音图片 */
.kqy{position: absolute;top: 62.4rpx;left: 66.5%;width: 32%;height: 48%;/* border-right-style:dotted; *//* background: aqua; */
}.kqma{width: 100%;height: 100%;
}/* 数字位置 */
.knums{position: relative;top: -115rpx;width: 60%;height: 100rpx;margin: auto;text-align: center;/* background: red; */
}.ms{position:absolute;font-size: 48rpx;/* left: 50%; */top: 20%;transform:translateX(-50%);
}.knq{position:absolute;width: 100%;height: 160rpx;line-height: 100rpx;display: flex;justify-content: center;align-items: center;font-size: 48rpx;/* background: aqua; */
}.knm{position:absolute;width: 100%;top: 160rpx;height: 60rpx;margin: auto;font-size: 30rpx;text-align: center;/* display: flex;justify-content: center;align-items: center; */}

json

{"navigationBarTitleText": "优惠券","usingComponents": {}
}

微信小程序简单的循环输出优惠券列表（完整小模板）相关推荐

JAVA小程序简单学籍系统参考代码，登陆小程序，Jtree //Jtree,JDBC,Jframe
JAVA小程序简单学籍系统//Jtree,JDBC,Jframe 我们可以先在JAVA写一个类打开数据库获取连接 package sql; import java.sql.Connection; im ...
微信小程序简单入门1
参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 1 创建项目开发者工具安装完成后,打开并使用微信扫码登录.选择创建"项 ...
微信小程序简单好看的表格器
微信小程序简单好看的表格 1.数据和样式 2.带纵向滑动条的列表纯色简单表格 3.带纵向滑动条的列表间隔色简单表格微信小程序目前没有 table 标签,需要用到表格,必须自己处理.想要一个简单的比较 ...
微信小程序——前端——抵扣券、优惠券样式
微信小程序--前端--抵扣券.优惠券样式效果图: 实现思路: 左边+划线+右边==使用信息+分割线+使用限制整体底色: .wrapper {margin: 0 auto;width: 100%;d ...
【微信小程序系列】小程序简单连接后端数据库完整示例（附免费下载的源码）（Servlet）
[微信小程序系列]小程序简单连接后端数据库完整示例(附免费下载的源码)(Servlet) 登录页面 login.wxml <view class="page">< ...
第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面前言一.Pages 二.TabBar 总结前言本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
微信小程序简单的信息表格的提交到数据库(新手篇)(云端数据库)
微信小程序简单的信息表格的提交到数据库(新手专属)(云端数据库) 大家好,我是小陈,一名大一的编码爱好者,,,,,刚刚结束了大一的学习生活,也总结出了一点编码的经验,希望与大家一起分享.我是学习物联网 ...
微信小程序--简单页面跳转
微信小程序--简单页面跳转例如:点击一个text ,跳转入一个新的页面blueberry.wxml 首先对text 设置监听事件 <view bindtap="toast" ...
【微信小程序系列】微信小程序简单的实现发送订阅信息
[微信小程序系列]微信小程序简单的实现发送订阅信息项目结构两个云函数一个页面获取模板注:详细内容中的参数很重要,一会要在云函数里用代码 app.js // app.js App({onLau ...

微信小程序简单的循环输出优惠券列表（完整小模板）

四个文件都有注释直接复制就可以用！

微信小程序简单的循环输出优惠券列表（完整小模板）相关推荐

最新文章

热门文章