E企盈营销工具技术服务商 热线:4006-838-530

微信小程序colorui购物车界面模板(无功能)

E企盈直播平台营销卖货系统

使用的是colorui的小程序UI框架。colorui地址:https://www.color-ui.com/index.wxml<view class=”cu-custom” style=”height:{{CustomBar}}px;”>    <view class=”cu-bar fixed none-bg text-white bg-img” style=”height:{{CustomBar}}px;padding-top:{{StatusBar}}px;”>        <view class=”head-title”>购物车</view>    </view></view><view class=”box”  style=”top:{{CustomBar}}px;”>    <view class=”canui-kong”>        <view class=”bg-gradual-orange padding radius text-center shadow-blur canui-kong-icon”>            <text class=”icon-cart”></text>        </view>        <view class=”text-lg padding text-center”>            <text class=”text-grey”> 购物车竟然是空的 </text>        </view>        <view class=”padding flex flex-wrap justify-between align-center”>            <button class=’cu-btn bg-gradual-green shadow-blur round’>去逛逛</button>        </view>    </view>    <view class=”cu-list menu menu-avatar goods-list” style=”display: none;”>        <view class=”cu-item”>            <view class=’action-checkbox’>                <checkbox class=’round orange’ checked></checkbox>            </view>            <view class=”cu-avatar radius lg” style=”background-image:url(https://image.weilanwl.com/img/square-3.jpg);”></view>            <view class=’content’>                <view> 喵星人互动群 </view>                <view class=’goods-price-btn’>                    <view class=’text-red text-sm text-price’>100.00</view>                    <view class=’action-btn-sum’>                        <button class=’cu-btn’>-</button>                        <input class=’ca-sum’ name=’input’ value=”1″></input>                        <button class=’cu-btn’>+</button>                    </view>                </view>            </view>        </view>        <view class=”cu-item”>            <view class=’action-checkbox’>                <checkbox class=’round orange’ checked></checkbox>            </view>            <view class=”cu-avatar radius lg” style=”background-image:url(https://image.weilanwl.com/img/square-3.jpg);”></view>            <view class=’content’>                <view> 喵星人互动群 </view>                <view class=’goods-price-btn’>                    <view class=’text-red text-sm text-price’>100.00</view>                    <view class=’action-btn-sum’>                        <button class=’cu-btn’>-</button>                        <input class=’ca-sum’ name=’input’ value=”1″></input>                        <button class=’cu-btn’>+</button>                    </view>                </view>            </view>        </view>    </view>    <view class=”cu-bar bg-white solid-bottom canui-foor-fixed” style=”display: none;”>        <view class=”action canui-checked”> <checkbox class=’round orange’ checked></checkbox> </view>        <view class=”action canui-delete”> <button class=’cu-btn icon-delete’></button> </view>        <view class=’submit canui-price’>合计 <text class=”text-red text-price”>200.00</text></view>        <view class=’bg-red submit canui-submit’>结算(2)</view>    </view></view>index.wxsspage {    padding-top: 50px;    padding-bottom:20rpx;}.cu-custom{    position: absolute;    width:100%;}.head-title{    margin: 0 auto;}.cu-custom .cu-bar{    padding-right:inherit;    background-image:linear-gradient(45deg, #ff9700, #ed1c24);}.bg-gradual-green {    background-image:linear-gradient(45deg, #ff9700, #ed1c24);}.text-green, .line-green, .lines-green {    color:#e45c5c;}.box{    position:absolute;    width:100%;}.canui-kong{    padding-top:100rpx;}.canui-kong-icon{    width:260rpx;    height:260rpx;    line-height:220rpx;    margin:0 auto;    border-radius:200rpx;    margin-bottom:30rpx;}.canui-kong-icon text{    font-size:160rpx;}.canui-kong .bg-gradual-green{    margin:0 auto;}.cu-list.menu-avatar>.cu-item{    padding-left:220rpx;}.goods-list .cu-item .action-checkbox{    left:30rpx;    position:absolute;}.cu-list.menu-avatar>.cu-item>.cu-avatar{    left:100rpx;}.goods-list .cu-item .goods-price-btn{    position:relative;}.goods-list .cu-item .text-price{    padding-right:260rpx;}.goods-list .cu-item .action-btn-sum{    position:absolute;    right:0px;    top:0px;    text-align:right;    border:1px solid #D9D9D9;    border-radius:2px;}.goods-list .cu-item .cu-btn{    float:left;    width:24px;    height:24px;    line-height:24px;    border-radius:0px;    font-size:18px;    padding:0px;    background-color: #F7F6F6;}.goods-list .cu-item .ca-sum{    float:left;    width:32px;    height:24px;    text-align:center;    font-size:12px;    line-height:24px;    background-color: #fbfbfb;    border-left:1px solid #D9D9D9;    border-right:1px solid #D9D9D9;    min-height:24px;}.canui-foor-fixed{    position: fixed;    bottom: 0;    width: 100%;    min-height:85rpx;}.canui-checked{    width:75rpx;}.canui-delete{    width:100rpx;}.canui-delete .cu-btn{    background-color:#fff;    font-size:35rpx;}.canui-price{    width:400rpx;    text-align:right;    align-self:stretch;    line-height:85rpx;    padding-right:20px;    font-size:13px;}.canui-submit{    width:200rpx;    align-self:stretch;    align-items:center;    display:flex;    text-align:center;    justify-content:center;    font-size:13px;} index.jsconst app = getApp();Page({data: {StatusBar: app.globalData.StatusBar,CustomBar: app.globalData.CustomBar,hidden: true,},onLoad: function (option) {}});  由于没有写功能,所以,js代码很少。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序colorui购物车界面模板(无功能)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏