微信 小程序组件 加入购物车全套 one wxss

//1,wxss

/*外部容器*/

.container {

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

box-sizing: border-box;

}

/*整体列表*/

.carts-list {

display: flex;

flex-direction: column;

}

/*每行单元格*/

.carts-item {

display: flex;

flex-direction: row;

height:220rpx;

/*width属性解决标题文字太短而缩略图偏移*/

width:100%;

align-items: center;

">white;

margin-bottom: 1px;

}

/* 对号图标 */

.carts-choice{

margin-right: 20rpx;

margin-left: 24rpx;

}

/*左部图片*/

.carts-image {

width:160rpx;

height:160rpx;

margin-right: 20rpx;

}

.carts-image image{

width: 100%;

height: 100%;

}

/*右上部分标题*/

.carts-title {

margin: 10rpx;

font-size: 28rpx;

}

/*右下部分价格与数量*/

.carts-subtitle {

font-size: 25rpx;

color:#ff3300;

margin: 20rpx 0 20rpx;

}

/*加减号控制数量*/

.stepper{

display: flex;

border-radius: 5px;

text-align: center;

}

.stepper text{

display: block;

width: 50rpx;

height: 50rpx;

border:1px solid #ddd;

line-height: 50rpx;

color: #cccccc;

}

.stepper text.normal{

border:1px solid rgba(221,221,221,1);

}

.stepper text.disabled{

border:1px solid rgba(221,221,221,0.3);

}

.stepper .number{

width: 80rpx;

font-size: 28rpx;

height: 50rpx;

border: 1px solid #ddd;

line-height: 50rpx;

color: #333333;

}

.stepper text:first-child{

border-right: none;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

}

.stepper text:last-child{

border-left: none;

border-top-right-radius: 3px;

border-bottom-right-radius: 3px;

}

.carts-list .delete{

flex: 1;

height: 100%;

position: relative;

}

.delete-img{

width: 32rpx;

height: 32rpx;

position: absolute;

right: 24rpx;

bottom: 20rpx;

}

.delete-img image{

width: 100%;

height: 100%;

vertical-align: top;

}

/* 全选和区结算按钮 ********************************/

/*底部按钮*/

.carts-footer {

width: 100%;

height: 120rpx;

display: flex;

/* flex-direction: row; */

/* justify-content: space-between; */

align-items: center;

position: fixed;

left: 0;

bottom: 0;

">white;

}

/*复选框*/

.carts-footer icon {

margin-left: 20rpx;

margin-right: 15rpx;

}

/*全选字样*/

.carts-footer text {

font-size: 30rpx;

margin-left: 8rpx;

line-height: 10rpx;

}

.all-chioce{

height: 100%;

border-top: 1px solid #dddddd;

box-sizing: border-box;

flex: 1;

display: flex;

justify-content: space-between;

}

.footer-left{

width: 190rpx;

display: flex;

align-items: center;

}

.footer-right{

padding-right: 25rpx;

flex: 1;

direction: rtl;

}

.right-text{

line-height: 80rpx;

}

.right-text text:last-child{

color: #ff3300;

}

/* .right-text{ */

/* margin-bottom: 10rpx; */

/* } */

.footer-right .free{

font-size: 20rpx;

color:#cccccc;

}

/*立即结算按钮*/

.carts-footer .button {

line-height: 120rpx;

text-align: center;

width:260rpx;

height: 120rpx;

">#ff3300;

color: white;

font-size: 36rpx;

border-radius: 0;

border: 0;

}

/* 全选和区结算按钮 ********************************/

/*复选框样式*/

/* .carts-list icon {

margin-top: 60rpx;

margin-right: 20rpx;

} */

时间: 2024-10-29 13:29:14

微信 小程序组件 加入购物车全套 one wxss的相关文章

微信 小程序组件 加入购物车全套 one js

// pages/shop/shop.js Page({ /** * 页面的初始数据 */ data: { carts: [ { teaname: '冠军乌龙茶-150g', image: '../../imgs/car/shopping_pic_1.png', num: '1', price: '1200.00', sum: '1200.0', selected: true, cid: 1001, }, { teaname: '18年老茶-150g', image: '../../imgs/c

微信 小程序组件 加入购物车全套 one wxml

<!--pages/shop/shop.wxml--> <view wx:if="{{hasList}}"> <view class="container carts-list"> <view wx:key="isshop" wx:for="{{carts}}" class="carts-item" > <view class="carts-c

微信小程序开发:学习笔记[3]——WXSS样式

微信小程序开发:学习笔记[3]--WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS与Web开发中的CSS类似.为了更适合小程序开发,WXSS对CSS做了一些补充以及修改. 文件组成 项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面. 页面样式:与app.json注册过的页面同名且位置同级的WXSS文件.比如注册了pages/rpx/index页

微信小程序组件解读和分析:五、text文本

text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <view > <text>我是文本组件</text> </view> <text>{{text}}</text> 下面是JS代码: [JavaScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 1

微信小程序组件解读和分析:六、progress进度条

progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress进度条组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-t

微信小程序组件化(上)

小程序对组件化的"支持"情况 微信小程序(以下简称"小程序",版本)虽然默认定义了很多有用的组件,但是在开发小程序过程中,往往需要自定义业务组件.而小程序开发者文档中却未对自定义组件给出很好的解决方案或示例. 猜其原因可能有两方面: 从小程序开放的API来看,它去除了DOM和BOM,视图与数据层交互采用简单的单向数据绑定和事件绑的形式.可能其初衷是想降低开发难度和学习门槛,尽量减少概念. 小程序推出时间不到一年,这些功能可能还在完善中. 自定义组件的难点 微信的组件

微信小程序组件通信

父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 <子组件 prop名字='值'></子组件> 2.子父通信 在子组件对应的元素身上绑定原生事件 <button bindtap = 'tapHandler'></button> // 在函数中,触发自定义事件 tapHandler(){ this.triggerEven

微信小程序组件——bindtap和catchtap的区别

了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程就是DOM事件流. JS冒泡事件:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的(所有祖先元素)中被触发.这 一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层 共同点 在微信小程序的事件机制中,bindtap和catchta

微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.checkbox多项选择器组件.switch开关选择组件.navigator页面连接组件等. Ⅰ.登录设计 登录表单中,需输入账号.密码进行登录,在账号.密码输入框中都有友好的提示信息:登录按钮默认是灰色不可用状态,只有输入内容后,才会变为可用状态:在登录按钮下面提供手机快速注册.企业用户注册.找回密码链