小程序优惠劵页面

最新推荐文章于 2024-02-05 09:45:00 发布

库行天下

最新推荐文章于 2024-02-05 09:45:00 发布

阅读量1.5k

点赞数

分类专栏： 2019/12/03 文章标签：小程序

本文链接：https://blog.youkuaiyun.com/wxb8826206/article/details/103368478

版权

这篇博客介绍了如何设计和实现一个小程序的优惠券页面，包括样式设置如字体大小、颜色、布局等，并展示了用于交换优惠券的输入框、按钮样式。此外，还涉及到页面滚动效果、优惠券列表的展示，以及相关的JavaScript页面生命周期函数和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

xml

<view class="content">
 <view class="coupon-top">
	<view class="exchange-box">
		<input type="text" placeholder="请输入兑换码" bindblur='changeSearch' bindconfirm='changeSearch' bindinput='changeSearch'></input>
		<button class="{
  {value!==''?'exchangex':'exchange'}}" bindtap="exchange">兑换</button>
	</view>
  </view>

<view class="swiper-tab">
  <view class="swiper-tab-item {
  {status==1?'active':''}}" data-current="1" bindtap="clickTab">未使用</view>
  <view class="swiper-tab-item {
  {status==2?'active':''}}" data-current="2" bindtap="clickTab">已使用</view>
  <view class="swiper-tab-item {
  {status==3?'active':''}}" data-current="3" bindtap="clickTab">已过期</view>
</view>
 
<view class='videoSwiper'>
	<view current="{
  {currentTab}}">
		<scroll-view scroll-y="{
  {true}}" style="height: {
  {clientHeight?clientHeight+'px':'auto'}}"  bindscrolltolower="loadmore">
    <block wx:if="{
  {list.length!==''}}" wx:for="{
  {list}}" wx:for-item="v" wx:key>
			<view class="coupon-item"  wx:for="{
  {v}}"  wx:key>
      
				<view class="coupon-item-top" wx:if="{
  {item.min_money!=1 && item.money != 1}}">
					<view class="coupon-item-top-fl itemx">
						<view class="price red">￥<i>{
  {item.money}}</i></view>
						<view class="size red">满<i>{
  {item.min_money}}</i>元可用</view>
					</view>
					<view class="coupon-item-top-fn itemx">
						<view class="title">{
  {item.title}}</view>
						<view class="size">全场可用</view>
						<view class="size">{
  {item.time}}</view>

最低0.47元/天解锁文章