欢迎来到懒人模板!我们专注可以申请彩金的网站互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序绿色顶部我的e卡黑色卡面样式模板制作注册自动送彩金可提现下载

    2018-06-07 09:52 来源/作者:懒人模板 分类:小程序教程  « »
    制作好以后效果图如下:
    一、wxml页面代码如下:
    <view class="page-body">
    <!--导航操作栏-->
        <view class = "nav-view">
            <view class="mycard category" bindtap="selectCategory" data-index="1">
                <text>我的e卡</text>
                <block wx:if="{{current_id == 1}}">
                <view class="select-line"></view>
                </block>
            </view>
            <view class="sendcard category" bindtap="selectCategory" data-index="2">
                <text>转赠卡</text>
                <block wx:if="{{current_id == 2}}">
                <view class="select-line"></view>
                </block>
            </view>
            <view class="waitforpay category" bindtap="selectCategory" data-index="3">
                <text>待支付</text>
                <block wx:if="{{current_id == 3}}">
                <view class="select-line"></view>
                </block>
            </view>
        </view>
        <!--e卡列表-->
        <view class="content-view">
            <block wx:for="{{ecards}}" wx:for-item="card" wx:key="{{id}}">
                <view class= "card-item">
                    <image src="../../images/my_ecard_bg.png" mode="scaleToFill"></image>
                    <text class="price">{{card.price}}</text>
                    <text class="left">{{card.left}}</text>
                    <text class="date_validity">{{card.date_validity}}</text>
                </view>
            </block>
        </view>
        <!--添加新卡按钮-->
        <view class="addcard-button" bindtap="addCard">
            <text>+添加新卡</text>
        </view>
    </view>
    <!--添加新卡的视图-->
    <block wx:if="{{show_addcard}}">
        <view class="toast-view" bindtap="cancal_add">
            <image src="../../images/guigeClose.png"></image>
            <view class="option-view" catchtap="option_tap">
                <input placeholder="请输入礼品卡密码" placeholder-style="font-size:28rpx;color:#d4d4d4" />
                <view class="line"></view>
                <button>确定</button>
            </view>
        </view>
    </block>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议
    博聚网