微信小程序中禮券效果4

阿新 • • 發佈：2019-05-03

arr flex 微信小程序 tor bin record ear items color

/* 優惠券開始 */

.history .quan {
    position: relative;
    width: 94%;
    height: 240rpx;
    margin: 20rpx auto;
    box-sizing: border-box;
    /* background-color: #fff; */
    color: #fff;
    /*左邊的波浪*/
    background-image: radial-gradient(rgb(248, 247, 247) 35%, #fff 35%);
    background 
-size: 17px 17px;
    background-position: -9px 0;
    background-repeat: repeat-y;
}

/* 左上角和左下角的缺口 */

.quan .left-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 30rpx;
    height: 30rpx;
    border-radius: 0 0 30rpx 0;
    background-color: #f2f2f2;
}

.quan .left-bottom {
    position: absolute;
    top: 211rpx;
    left:  
0;
    width: 30rpx;
    height: 30rpx;
    border-radius: 0 30rpx 0 0;
    background-color: #fafafa;
}

/* 右上角和右下角 */

.quanRight {
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.quanRight .icon {
    font-size: 50rpx;
    color: #ccc;
}

.quanRight .downArrow {
    display: flex;
    flex 
-direction: column;
    align-items: center;
    justify-content: center;
}

.quanRight .right-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 30rpx;
    height: 30rpx;
    border-radius: 0 0 0 30rpx;
    background-color: #f2f2f2;
}

.quanRight .right-bottom {
    position: absolute;
    top: 211rpx;
    right: 0;
    width: 30rpx;
    height: 30rpx;
    border-radius: 30rpx 0 0 0;
    background-color: #f2f2f2;
}

/* 右上角和右下角結束 */

.quanRight {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: 75%;
    padding-left: 20rpx;
    background-image: radial-gradient(#fbfbfb 35%, #fff 35%);
    background-size: 17px 17px;
    background-position: calc(100% + 9px) 0;
    background-repeat: repeat-y;
}

.quanRight .content {
    display: flex;
    flex-direction: column;
}

/* 用過的禮券開始 */

.quanRights {
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transform: rotate(8deg);
    position: relative;
    transform-origin: left bottom;
}

.quanRights .icon {
    font-size: 50rpx;
    color: #ccc;
}

.quanRights .downArrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quanRights .right-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 30rpx;
    height: 30rpx;
    border-radius: 0 0 0 30rpx;
    background-color: #f2f2f2;
}

.quanRights .right-bottom {
    position: absolute;
    top: 211rpx;
    right: 0;
    width: 30rpx;
    height: 30rpx;
    border-radius: 30rpx 0 0 0;
    background-color: #f2f2f2;
}

.quanRights {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: 75%;
    padding-left: 20rpx;
    background-image: radial-gradient(#fbfbfb 35%, #fff 35%);
    background-size: 17px 17px;
    background-position: calc(100% + 9px) 0;
    background-repeat: repeat-y;
}

.quanRights .content {
    display: flex;
    flex-direction: column;
}

/* 用過的禮券結束 */

.downArrow .spot {
    color: #ccc;
    margin-bottom: -35rpx;
}

.downArrow .spots {
    margin-bottom: -10rpx;
    color: #ccc;
}

.clear::after {
    content: "";
    display: block;
    clear: both;
}

.quan .quanleft {
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    border-right: 1rpx solid rgb(245, 241, 241);
    padding-left: 20rpx;
    background-color: #fff;
}

.quanleft image {
    width: 120rpx;
    height: 120rpx;
    margin: 50rpx 5%;
}

.company {
    font-size: 24rpx;
    color: #999;
    line-height: 40rpx;
    padding-top: 20rpx;
}

.name {
    font-size: 36rpx;
    color: #111;
    line-height: 52rpx;
}

.desc {
    font-size: 20rpx;
    color: #444;
    line-height: 32rpx;
}

.date {
    font-size: 24rpx;
    color: #999;
    padding-top: 35rpx;
}

.ft {
    display: inline-block;
    margin: 40px;
}

/* 優惠券結束 */

.swiper-box .record {
    background-color: #fff;
    width: 90%;
    display: flex;
    border-radius: 10rpx;
    flex-direction: column;
    justify-content: center;
    margin: 30rpx auto;
}

    <swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange">
        <!-- 優惠券 -->
        <swiper-item>
            <view class=‘history‘>
                <!-- 優惠券開始 -->
                <view class="quan clear">
                    <view class="quanleft">
                        <image src=‘.././common/image/logo.png‘></image>
                    </view>
                    <view class=‘left-top‘></view>
                    <view class=‘left-bottom‘></view>
                    <view class="quanRight">
                        <view class=‘content‘>
                            <text class="company">Melissa</text>
                            <text class="name">滿1000減300優惠券</text>
                            <text class="desc">限上海長寧來福士/上海久光/上海市百一點使用</text>
                            <text class="date">有效期至：2018-10-18</text>
                        </view>
                        <view class=‘downArrow‘>
                            <view class=‘spot‘>.</view>
                            <view class=‘spots‘>.</view>
                            <view class=‘iconfont icon-jiantou_xiangxia_o icon‘></view>
                        </view>
                        <view class=‘right-top‘></view>
                        <view class=‘right-bottom‘></view>
                    </view>
                </view>

                <view class="quan clear">
                    <view class="quanleft">
                        <image src=‘.././common/image/logo.png‘></image>
                    </view>
                    <view class=‘left-top‘></view>
                    <view class=‘left-bottom‘></view>
                    <view class="quanRights">
                        <view class=‘content‘>
                            <text class="company">Melissa</text>
                            <text class="name">滿1000減300優惠券</text>
                            <text class="desc">限上海長寧來福士/上海久光/上海市百一點使用</text>
                            <text class="date">有效期至：2018-10-18</text>
                        </view>
                        <view class=‘downArrow‘>
                            <view class=‘spot‘>.</view>
                            <view class=‘spots‘>.</view>
                            <view class=‘iconfont icon-jiantou_xiangxia_o icon‘></view>
                        </view>

                        <view class=‘right-top‘></view>
                        <view class=‘right-bottom‘></view>
                    </view>
                </view>

                <!-- 優惠券結束 -->
            </view>
        </swiper-item>




        <!-- 過期 -->
        <swiper-item>
            <view class=‘record‘>
                <text>45454</text>
            </view>
        </swiper-item>
    </swiper>

微信小程序中禮券效果4

arr flex 微信小程序 tor bin record ear items color /* 優惠券開始 */ .history .quan { position: relative; width: 94%; heig

微信小程序中循環輸出標簽寫法

註意 lis -1 logs first wid fix 循環技術 <view wx:for="{{index_first_list}}"> wx:for中是數組名在js中data裏面添加數組的值，註意數組的寫法。調用數組裏面的值默認用item，例如：

微信小程序中target與currentTarget

message 渲染 console cat 綁定 har nload bind area 如有錯誤，請糾出，大家一起進步!!! 　　target在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。但事件流處於目標階段，target與current

微信小程序中公用內容

哪裏 nbsp ren 暴露 log targe import func require 微信小程序中各個頁面調用公用的js 在util.js文件中 // 跳轉哪裏 function go(where) { wx.reLaunch({ url: where,

微信小程序中不同頁面間的參數傳遞

-c temp 用戶 tlist emp 跳轉 Coding 響應小程序從樣式頁面WXML向邏輯頁面JS傳遞點擊事件的響應函數中傳遞參數 1  2 <block wx:for="{{postList}}" wx:for-

微信小程序中的循環遍歷問題

.sh success show code 我們 log ast ons 小程序比如：如果在微信小程序中要遍歷輸出 0-9 的數，我們會使用for循環 for(var i=0;i<10;i++){ console.log(i); } 確實結果

富文本編輯器內容在微信小程序中展示的解決方案

tco 後臺實現 sign oot cti sele 編輯器 post 最近在做商品詳情的時候，有這樣一個需求：用戶可以使用富文本編輯器編輯商品，並且在小程序中可以展示。然鵝，小程序並不支持HTML標簽，webview組件也只能加載URL,這就捉雞

微信小程序中跳轉另一個小程序

微信 open mini ucc ces java auth ESS min wx.navigateToMiniProgram({ appId: ‘xxxxxxxxxxxxxxxxxx‘, // 要跳轉的小程序的appid path: ‘page/

微信小程序實現滑動刪除效果

move abs lis -s data- sta 利用 ons line 在一些app中，隨處可見左滑動的效果，在微信小程序中，官方並未提供相關組件，需要我們自己動手寫一個類似的效果下面僅列舉出核心代碼，具體的優化需要根據你自身的需求 <view clas

在微信小程序中使用redux

omap return 自動 def top create 如何解決更新ui dem 本文主要講述，在微信小程序中如何使用redux DEMO 需要解決的問題如何在小程序中引入redux狀態管理庫，及它相關的插件？微信小程序沒有清晰的異步api，便於thunkM

微信小程序中的rpx與移動設備物理像素

tro hone 分辨 iphone src 分辨率 strong http pan 如下圖： pt也稱邏輯像素點，px物理像素點，1pt等於2px或者3px或更多; iphone6下面0.5pt=1px=1rpx; 使用rpx,小程序在不同設備分辨率下自行轉換； PP

在微信小程序中使用LeanCloud（一）

存儲 tar true script eal 字段第一個對象數組例子　　之前學習了微信小程序前端，使用到LeanCloud線上數據庫【傳送門】。作為一個前端開發人員，了解後端及數據庫是學習工作的需要。　　LeanCloud直接登錄，未註冊直接創建賬戶。它是一款免

淺談高大上的微信小程序中渲染html內容—技術分享

ren const num 前端工程變量前後臺用戶視頻 idt 大部分Web應用的富文本內容都是以HTML字符串的形式存儲的，通過HTML文檔去展示HTML內容自然沒有問題。但是，在微信小程序（下文簡稱為「小程序」）中，應當如何渲染這部分內容呢？解決方案 wxPa

微信小程序實現星星評價效果

comm 入門到精通 string 1-1 osi 分享圖片場景 ase yui 代碼實現 wxml文件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <

微信小程序中出現：腳本錯誤或者未正確調用 Page()

-a 方法圖像 line get controls lec inline fcm 錯誤： ? 解決方法： //在頁面當中的.js文件裏面加上 Page({ })即可微信小程序中出現：腳本錯誤或者未正確調用 Page()

在微信小程序中使用vant

配置否則完成 mode 技術分享 eap strong 遇到找到在微信小程序中如何使用vant UI ,最近在開發小程序項目的時候遇到了這個問題, 去網上百度發現大家給的步驟普遍都是直接npm i vant-weapp -S --production,接著構建npm

微信小程序中的不同場景，不同的判斷，請求的時機

滾動解決不同利用 png 就會自由 bug onload 本來5月1之前就想寫一下一篇關於小程序不同場景下發送ajax請求的問題，但是放假的前一天，出了個大bug，就是因為我修改不同的場景下執行不同的邏輯造成的 1、首先，在小程序裏，微信做了很多的緩存，我們可以很

微信小程序卡券接入流程，酷客多為你支招

酷客多小程序小程序微信小程序酷客多 1.必須是已經認證的小程序（需300元/年認證費）2.必須是已經認證的微信公眾號（需300元/年認證費）必須在微信公眾平臺開通卡券功能3.需要在微信開放平臺綁定公眾號AppId與小程序AppId（開發者資質認證300元/年）在開放平臺綁定小程序和微信公

微信小程序 setData動態設置數組中的數據

span code 傳遞 sel color log 設置 pan select setdata傳遞動態數據值必須為對象(只能是key:value) 語法如下 this.setData({ filter: 1212 }) 如果

微信小程序的動畫效果

vue.js 透明 ref 外部微信小程序 btn ado translate getc 前言　　由於公司計劃有變，所以從H5頁面改成去小程序寫。所以在著手開發小程序。本人也不是什麽前端高手，只是一名寫後端偶爾寫寫前端的渣渣。請前端大神們勿噴。一、什麽是微

微信小程序中禮券效果4

相關推薦