微信小程序-订单评价交互样式（WXML&WXSS&JS） - CSDN博客
微信小程序-订单评价交互样式（WXML&WXSS&JS）
核心代码：
class="weui-flex order_comment_type"&
class="weui-flex__item"&
class="placeholder" bindtap="selectCommentType" data-index="{{index}} data-type="GOOD"&
src="{{mentType=='GOOD'?'/images/icon_good_select.png':'/images/icon_good.png'}} style="width:30height:30"&&
class="{{mentType=='GOOD'?'order_comment_type_selected':'order_comment_type_default'}}&好评&
class="weui-flex__item" style="text-align:"&
class="placeholder" bindtap="selectCommentType" data-index="{{index}} data-type="NOTBAD"&
src="{{mentType=='NOTBAD'?'/images/icon_middle_select.png':'/images/icon_middle.png'}} style="width:30height:30"&&
class="{{mentType=='NOTBAD'?'order_comment_type_selected':'order_comment_type_default'}}&中评&
class="weui-flex__item" style="text-align:"&
class="placeholder" bindtap="selectCommentType" data-index="{{index}} data-type="BAD"&
src="{{mentType=='BAD'?'/images/icon_bad_select.png':'/images/icon_bad.png'}} style="width:30height:30"&&
class="{{mentType=='BAD'?'order_comment_type_selected':'order_comment_type_default'}}&差评&
selectCommentType: function (e) {
console.log('选中的是第几条评论的哪一种类型', e.currentTarget.dataset);
var commentList = this.mentL
var index = parseInt(e.currentTarget.dataset.index);
commentList[index].commentType = e.currentTarget.dataset.
this.setData({
'commentList': commentList
完整代码：
class="order_comment_bg"&
wx:for="{{commentList}} style="background:#"&
class="order_comment_item"&
class="weui-flex order_comment_content bottom_border"&
class="placeholder"&
src="{{modityIcon}} class="order_comment_img"&&
class="weui-flex__item order_comment_textarea_box"&
class="placeholder"&
class="weui-textarea order_comment_textarea" placeholder="写评论" bindblur="saveContent" data-index="{{index}} value="{{item.content}} auto-height /&
class="weui-flex order_comment_type"&
class="weui-flex__item"&
class="placeholder" bindtap="selectCommentType" data-index="{{index}} data-type="GOOD"&
src="{{mentType=='GOOD'?'/images/icon_good_select.png':'/images/icon_good.png'}} style="width:30height:30"&&
class="{{mentType=='GOOD'?'order_comment_type_selected':'order_comment_type_default'}}&好评&
class="weui-flex__item" style="text-align:"&
class="placeholder" bindtap="selectCommentType" data-index="{{index}} data-type="NOTBAD"&
src="{{mentType=='NOTBAD'?'/images/icon_middle_select.png':'/images/icon_middle.png'}} style="width:30height:30"&&
class="{{mentType=='NOTBAD'?'order_comment_type_selected':'order_comment_type_default'}}&中评&
class="weui-flex__item" style="text-align:"&
class="placeholder" bindtap="selectCommentType" data-index="{{index}} data-type="BAD"&
src="{{mentType=='BAD'?'/images/icon_bad_select.png':'/images/icon_bad.png'}} style="width:30height:30"&&
class="{{mentType=='BAD'?'order_comment_type_selected':'order_comment_type_default'}}&差评&
class="line"&&
class="commnet_btn_box"&
class="weui-btn" style="background:#158447;font-size:30padding:10rpx 0;" type="primary" formType="submit"&确定&
windowHeight: 'auto',
commentList: [
url: 'http://share./daka/pictures/commodity_icon.png',
url: 'http://share./daka/pictures/commodity_icon.png',
url: 'http://share./daka/pictures/commodity_icon.png',
onShow: function () {
var vm = this
for (var i = 0, len = commentList. i & i++) {
commentList[i].commentType = 'GOOD';
selectCommentType: function (e) {
console.log('选中的是第几条评论的哪一种类型', e.currentTarget.dataset);
var commentList = this.mentL
var index = parseInt(e.currentTarget.dataset.index);
commentList[index].commentType = e.currentTarget.dataset.
this.setData({
'commentList': commentList
saveContent: function (e) {
console.log('保存评论到列表', e.detail.value, e.currentTarget.dataset.index);
var vm = this;
var commentList = mentL
var index = e.currentTarget.dataset.
commentList[index].content = e.detail.
vm.setData({
commentList: commentList
.order_comment_bg {
overflow: scroll;
background: #efeff4;
.order_comment_item {
padding: 30rpx 0;
margin: 0 0 0 30rpx;
.order_comment_img {
width: 134rpx;
height: 134rpx;
border: 1px solid #e5e5e5;
.order_comment_content {
padding-bottom: 16rpx;
.order_comment_textarea_box {
margin-left: 20rpx;
.order_comment_textarea {
font-size: 30rpx;
.order_comment_type {
padding: 12rpx 30rpx 0 0;
.order_comment_type_default, .order_comment_type_selected {
font-size:30rpx;
margin-left:10rpx;
.order_comment_type_default{
color: #888888;
.order_comment_type_selected{
color: #000000;
.commnet_btn_box{
width:90%;
margin:20rpx 5%;
本文已收录于以下专栏：
相关文章推荐
做网络营销的人，肯定会对这个标题感兴趣，哈哈，今天来说说所谓的“不加群就可以提前QQ群成员”是咋回事。。。
如今大多数QQ群都是拒绝陌生人加入的，需要身份验证，要想在不加入群的情况下知道里面有哪些成...
CSDN 社区网站数据库泄露 ，近 600 万用户真实账号密码外泄。该事件横扫整个中文互联网，并且随后又爆出
多玩游戏 800 万用户资料被泄露 ，另有传言人人网、开心网、天涯社区、世纪佳...
对于css不熟悉的android程序员来说，开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了，它们两者相当于android的布局文件，其中wxml指...
对于css不熟悉的Android程序员来说，开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了，它们两者相当于android的布局文件，其中wxml指...
app.wxml相当于我们的app中的xml文件内容，看了大半天的界面代码感觉还是不太适应这种js风格的东西，不过以后了解多了估计就好些了。
我们首先介绍.wxml内容
有句文档上的话很重要 WX...
WXMLWXML（WeiXin Markup Language）是微信的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。（小安娜：好像很厉害的样子，那基础组件、事件系统是什么？感觉更厉害，...
微信小程序编辑器
写小程序的时候，企鹅把结构表现层(html)的后缀名定义为wxml，把样式层定义为wxss
然后写起代码来就是这样子。。
说好的标红，高亮，自动提示，自动缩进呢？这怎么写，，
微信小程序，学习笔记（二）样式（WXSS）及一个简单的小测试用例WXSS（WeiXin Style Sheets）这东西其实是微信自己的一种 CSS 语言，大部分都还是 CSS 语法，也有自己的东西，...
对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来
界面结构wxmL比较容易理解，主要是由八大类基础组件构成：
一、引入模板小程序提供了两个引入外部模板的方法：import和include
使用外部模板可以实现大部分共同页面的代码利用，在一个app中，头部和脚部基本不会
变动太大，这时就可以通过模板的...
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)微信小程序----关于变量对象data
前端wxml取后台js变量值
时间： 14:24:11
&&&& 阅读：195
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&（一）页面变量对象data
对象data 有两个方面用途
第一，前端wxml的数据渲染是通过设置此对象中定义的变量进行关联展现的
第二，定义JS页面中的页面局部变量，使其整个页面中可使用或调用
对象data定义的变量支持各种数据类型，string,int,[],{}
第一.wxml数据渲染，只要通过设置data值（this.setData({...})）即可
wxml页面：detail对象中包含有TaskBillCode与BillDate两个属性
第二.页面变量
(二)前端wxml取后台js变量值
1.js后台只能通过设置Data里的变量值( this.setData({}) )，前台wxml才能得到渲染 &wxml以双括号取变量值 &{{ &var }} &&
设置变量值 ：
2. 列表渲染，即数据List &用循环进行渲染 & wx:for="{{ taskItems}}" &默认子项为item
3.关于多数据的数据类型，目前wxml取变量只支持数组，并不支持对象
这里面的billStatus 只能定义为数组类型，才能支持wxml用变量取数组的值 &
&&billStatus:[]
如定义为下面这样
&&billStatus:{}
则会导致&{{billStatus[item.Status]}} 取不到值 ，但代入数值还是可以取到&{{billStatus[1]}}
4.关于在全局里app.js定义数组
一种是直接在全局变量对象中定义，但这样是指定不了下标的,下标只能从默认的0开始
别一种则是在全局变量对象中只定义动态数组变量，在加载后赋值 &这样是能达到指定下标变量名的效果
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：/Voop/p/6364594.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！只需一步，快速开始
扫一扫，登录网站
后使用快捷导航没有帐号？
微信小程序wxml和wxss样式
微信小程序wxml和wxss样式详解
对于css不熟悉的程序员来说，开发面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了，它们两者相当于的布局文件，其中wxml指定了界面的框架结构，而wxss指定了界面的框架及元素的显示样式。一、wxml界面结构wxmL比较容易理解，主要是由八大类基础组件构成：一、视图容器(View Container)：二、基础内容(Basic Content)组件名说明组件名说明view视图容器icon&图标scroll-view可滚动视图容器text文字swiper可滑动的视图容器progress进度条三、表单组件(Form)四、操作反馈组件(Interaction)组件名说明组件名说明button按钮action-sheet上拉菜单form表单modal模态弹窗input输入框progress进度条checkbox多项选择器toast短通知radio单项选择器五、导航(Navigation)picker列表选择器组件名说明slider滑动选择器navigator应用内跳转switch开关选择器label标签六、多媒体(Media)七、地图(Map)组件名说明组件名说明audio音频map地图image图片video视频八、画布(Canvas)组件名说明canvas画布关于这八大类的属性和具体用法可参考以下参考文献链接：二、wxsswxml理解起来容易，但光搭好了框架，并不能达到我们想要的界面效果，这就需要用到wxss样式了。wxss样式决定了组件应该如何显示，并在css的基础上做了一些功能扩展，主要包括：1.尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。rpx 与 px单位换算如下：设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone51rpx = 0.42px1px = 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6s1rpx = 0.552px1px = 1.81rpx2.样式导入可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结束。例如：/** other.wxss **/.appText{& margin:10}/** app.wxss **/@import "other.wxss";.content_text:{& margin:15}app.wxss是全局样式，作用于每一个页面，而page下的每一个的wxss文件只作用于当前页面，并对全局样式中的相同属性会覆盖。对于微信小程序wxss样式的使用来说，其实大部分都和css样式一致，下面简单的进行介绍一下：wxss样式属性一、wxss display(显示)属性说明flex多栏多列布局flex-direction:row/columninline-block行内块元素inline此元素会被显示为内联元素，元素前后没有换行符inline-table作为内联表格来显示（类似 ），表格前后没有换行符inline-flex将对象作为内联块级弹性伸缩盒显示none此元素不会被显示block此元素将显示为块级元素，此元素前后会带有换行符list-item此元素会作为列表显示table会作为块级表格来显示（类似 ），表格前后带有换行符））））））table-caption作为一个表格标题显示（类似 ）table-cell作为一个表格单元格显示（类似
和 ）table-column作为一个单元格列显示（类似 table-column-group作为一个或多个列的分组来显示（类似 table-row作为一个表格行显示（类似 table-row-group作为一个或多个行的分组来显示（类似 table-header-group作为一个或多个行的分组来显示（类似 table-footer-group作为一个或多个行的分组来显示（类似 inherit从父元素继承 display 属性的值flex:多栏多列布局 /content/14/3_.shtml二、wxss position(定位)属性说明absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）inherit规定应该从父元素继承 position 属性的值三、wxss float(浮动)属性说明left元素向左浮动right元素向右浮动none默认值元素不浮动，并会显示在其在文本中出现的位置。inherit规定应该从父元素继承 float 属性的值。四、wxss background(背景)属性说明语法(属性值)background简写属性，作用是将背景属性设置在一个声明中background: color position size repeat origin cbackground-color指定要使用的背景颜色background-position指定背景图像的位置background-position:centerbackground-size&指定背景图片的大小background-size:80px 60宽度 高度background-repeat指定如何重复背景图像repeat,repeat-x,repeat-y,no-repeat,inheritbackground-origin指定背景图像的定位区域padding-box 背景图像填充框的相对位置border-box 背景图像边界框的相对位置content-box 背景图像的相对位置的内容框background-clip指定背景图像的绘画区域属性值，同上background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。scroll 背景图片随页面的其余部分滚动。这是默认fixed 背景图像是固定的inherit 指定background-attachment的设置应该从父元素继承local 背景图片随滚动元素滚动background-image指定要使用的一个或多个背景图像url('URL') 图像的URLnone 无图像背景会显示。这是默认inherit 指定背景图像应该从父元素继承五、wxss border(边框)属性说明语法(属性值)border简写属性，用于把针对四个边的属性设置在一个声明border:5border-width用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度border-top-width 上右下左边框厚度 属性值：thin medium thick lengthborder-style设置元素所有边框的样式，或者单独地为各边设置边框样式。border-top-width 上右下左边框样式 属性值：solid,dashed,dotted,double等border-color元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色border-top-width 上右下左边框颜色六、xss 轮廓（outline）属性说明语法(属性值)outline在一个声明中设置所有的外边框属性outline: outline-color, outline-style, outline-widthoutline-color设置外边框的颜色outline-style设置外边框的样式。属性值：solid,dashed,dotted,double等outline-width设置外边框的宽度属性值：thin medium thick length七、xss 文本属性（text）属性说明语法(属性值)color设置文本颜色direction设置文本方向。ltr:文本方向从左到右;rtl:文本方向从右到左letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本left：把文本排列到左边。默认值，由浏览器决定。right：把文本排列到右边。center：把文本排列到中间。justify：实现两端对齐文本效果。inherit: 规定应该从父元素继承 text-align 属性的值。text-decoration向文本添加修饰underline 定义文本下的一条线。overline 定义文本上的一条线。line-through 定义穿过文本下的一条线。blink 定义闪烁的文本。text-indent缩进元素中文本的首行text-shadow设置文本阴影text-shadow: h-shadow v-h-shadow:水平阴影的位置,允许负值;v-shadow:垂直阴影的位置,允许负值;blur:模糊的距离;color:阴影的颜色text-transform控制元素中的字母capitalize 文本中的每个单词以大写字母开头。uppercase 定义仅有大写字母。lowercase 定义无大写字母，仅有小写字母。unicode-bidi设置或返回文本是否被重写&vertical-align设置元素的垂直对齐white-space设置元素中空白的处理方式word-spacing设置字间距八、xss 字体属性（font）属性说明语法(属性值)font在一个声明中设置所有字体属性font:font-style font-variant font-weight font-size/line-height font-family(按顺序)font-style指定文本的字体样式normal 默认值。浏览器显示一个标准的字体样式。italic 浏览器会显示一个斜体的字体样式。oblique 浏览器会显示一个倾斜的字体样式。inherit 规定应该从父元素继承字体样式。font-variant以小型大写字体或者正常字体显示文本normal 默认值。浏览器会显示一个标准的字体。small-caps 浏览器会显示小型大写字母的字体。inherit 规定应该从父元素继承 font-variant 属性的值。font-weight指定字体的粗细normal 默认值。定义标准的字符。bold 定义粗体字符。bolder 定义更粗的字符。lighter 定义更细的字符。inherit 规定应该从父元素继承字体的粗细。font-size指定文本的字体大小smaller 把 font-size 设置为比父元素更小的尺寸。larger 把 font-size 设置为比父元素更大的尺寸。length 把 font-size 设置为一个固定的值。% 把 font-size 设置为基于父元素的一个百分比值。font-family指定文本的字体系列九、xss margin(外边距)（margin）属性说明语法(属性值)margin在一个声明中设置所有外边距属性。margin:10px 5px 15px 20(上边距，右边距，下边距，左边距)margin-top设置元素的上外边距。margin-right设置元素的右外边距。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距十、xss padding(填充)（padding）属性说明语法(属性值)padding使用缩写属性设置在一个声明中的所有填充属性padding:10px 5px 15px 20(上填充，右填充，下填充，左填充)padding-top设置元素的顶部填充。padding-right设置元素的右部填充padding-bottom设置元素的底部填充padding-left设置元素的左部填充十一、xss 选择器选择器样例样例描述.class(类选择器).intro选择所有拥有class="intro"的组件#id(id选择器)#firstname选择拥有id="firstname"的组件elementview选择所有view组件element, elementview&checkbox选择所有文档的view组件和所有的checkbox组件::afterview::after在view组件后边插入内容::beforeview::before在view组件前边插入内容有一些属性值太多且实际应用的比较少 可以参考w3cschool的css文档：对于微信小程序的文档手册可参考以下链接：posts - 5,&
comments - 3,&
trackbacks - 0
（一）页面变量对象data
对象data 有两个方面用途
第一，前端wxml的数据渲染是通过设置此对象中定义的变量进行关联展现的
第二，定义JS页面中的页面局部变量，使其整个页面中可使用或调用
对象data定义的变量支持各种数据类型，string,int,[],{}
第一.wxml数据渲染，只要通过设置data值（this.setData({...})）即可
wxml页面：detail对象中包含有TaskBillCode与BillDate两个属性
第二.页面变量
(二)前端wxml取后台js变量值
1.js后台只能通过设置Data里的变量值( this.setData({}) )，前台wxml才能得到渲染 &wxml以双括号取变量值 &{{ &var }} &&
设置变量值 ：
2. 列表渲染，即数据List &用循环进行渲染 & wx:for="{{ taskItems}}" &默认子项为item
3.关于多数据的数据类型，目前wxml取变量只支持数组，并不支持对象
这里面的billStatus 只能定义为数组类型，才能支持wxml用变量取数组的值 &
&&billStatus:[]
如定义为下面这样
&&billStatus:{}
则会导致&{{billStatus[item.Status]}} 取不到值 ，但代入数值还是可以取到&{{billStatus[1]}}
4.关于在全局里app.js定义数组
一种是直接在全局变量对象中定义，但这样是指定不了下标的,下标只能从默认的0开始
别一种则是在全局变量对象中只定义动态数组变量，在加载后赋值 &这样是能达到指定下标变量名的效果
阅读(...) 评论()微信小程序----关于变量对象data 和 前端wxml取后台js变量值 - CSDN博客
微信小程序----关于变量对象data 和 前端wxml取后台js变量值
（一）页面变量对象data
页面变量对象data
对象data 有两个方面用途
第一，前端wxml的数据渲染是通过设置此对象中定义的变量进行关联展现的
第二，定义JS页面中的页面局部变量，使其整个页面中可使用或调用
对象data定义的变量支持各种数据类型，string,int,[],{}
第一.wxml数据渲染，只要通过设置data值（this.setData({...})）即可
wxml页面：detail对象中包含有TaskBillCode与BillDate两个属性
第二.页面变量
(二)前端wxml取后台js变量值
1.js后台只能通过设置Data里的变量值( this.setData({}) )，前台wxml才能得到渲染 &wxml以双括号取变量值 &{{ &var }} &&
设置变量值 ：
2. 列表渲染，即数据List &用循环进行渲染 & wx:for=&{{ taskItems}}& &默认子项为item
3.关于多数据的数据类型，目前wxml取变量只支持数组，并不支持对象
这里面的billStatus 只能定义为数组类型，才能支持wxml用变量取数组的值 &
&&billStatus:[]
如定义为下面这样
&&billStatus:{}
则会导致&{{billStatus[item.Status]}} 取不到值 ，但代入数值还是可以取到&{{billStatus[1]}}
4.关于在全局里app.js定义数组
一种是直接在全局变量对象中定义，但这样是指定不了下标的,下标只能从默认的0开始
别一种则是在全局变量对象中只定义动态数组变量，在加载后赋值 &这样是能达到指定下标变量名的效果
本文已收录于以下专栏：
相关文章推荐
做了几天颇有心得
微信小程序里面有个app.js，我们可以在这个里面设置全局变量，像酱
[javascript]
view plain
举个例子，比如从商品管理列表页，相对自己发布的商品进行修改，点击修改按钮，通过 activityId 唯一标识进行修个这个商品， 这个activityId
我们可以通过 页面跳转传值，
在 onLo...
Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
//index.js
text: "T...
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
{{message}} // page.js
WXML(WeiXin Markup Language)是MINA设计的一套标签语言，结合基础组件，事件系统，可以构建出页面的结构。简单的说就是微信团队自己设计出来一种xml标签语言，在小程序中扩展名...
通过小程序官方文档可知：
Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据，WXML 中的动...
微信小程序提供了app.js文件，用于放置一些全局的函数和全局的属性，方便开发者的调用
一般情况下，我都会把一些常用的函数和属性写在app.js文件内，这样不用重复写代码。
下面以全局属性为例
原文地址：https://mp./s?__biz=MzAwNjI5MTYyMw==&mid=&idx=1&sn=4dc4cb5ead8...
import java.util.StringT
import java.util.regex.Pimport org.junit.Tpublic class ...
可以看到这是一个列表，每一条可以看做是一个item,item自己会有自己的wxml和wxss,先看一下
item.wxss.item_class{
width: 100%;
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}