微信小程序循环 给当前的css样式

<repeat for="{{array}}" key="index" index="index" item="item">

<form report-submit="true" @submit="submit" @reset="reset">

<button form-type="submit" class="form_button">

<view class="nr_price {{state==index?‘active-tag‘:‘‘}}" @tap="select_date" data-key=‘{{index}}‘>

{{item.price}}

</view>

</button>

</form>

</repeat>

.nr_price {

margin-top: 29rpx;

float: left;

width: 164rpx;

height: 80rpx;

background: #fff;

box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.15);

border-radius: 10rpx;

margin-right: 30rpx;

font-size: 30rpx;

font-family: PingFang-SC-Regular;

font-weight: 400;

color: #333333;

text-align: center;

line-height: 80rpx;

}

.active-tag {

color: #F83E4D;

}

state: ‘‘,

select_date(e) {

// this.setData({

// state: e.currentTarget.dataset.key,

// });

this.state = e.currentTarget.dataset.key

this.$apply();

}

原文地址:https://www.cnblogs.com/ylblogs/p/10271194.html

时间: 2024-11-01 11:04:56

微信小程序循环 给当前的css样式的相关文章

原创:新手布局福音!微信小程序使用flex的一些基础样式属性

来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明. 先来看看关于flex的一张图: 从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者纵轴排列的顺

微信小程序之雪碧图(css script)

今天有朋友问我关于微信小程序中如何在不占用大量网络带宽的情况下快速加载图片,我给他推荐了两种方式 1.雪碧图(css script),有过前端经验的朋友应该都有接触过. 2.懒加载. 由于时间关系我就先为大家介绍第一种雪碧图加载,其实雪碧图加载就是将多张大小尺寸基本相同类型的图片 拼凑在一起形成一张新的图片,在页面中不会一个图片就向网络发送一次请求,这样会使得图片加载缓慢,影响 用户体验感.这里的雪碧图是由CssGaga拖拽生成的,这个软件的使用就不为大家介绍了,网上很多下载地址. 操作很简单.

小北微信小程序之小白教程系列之 -- 样式(WXSS)

为了适应广大的前端开发者,WXSS 具有 CSS 大部分 特性.同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改.与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入. 补充:关于扩展的特性我们下面会说,既然文档说了WXSS具有CSS 大部分特性,那么有什么不同那? 1.没有body 是的,在小程序的每一个page里是没有body属性的,不过你可以通过在wxss中对page的设置来影响整个页面的样式,比如下面的代码 page { background:#F8F8F8

微信小程序去掉checkbox前面的方框/样式修改

微信小程序checkbox <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}" wx:key="item"> <checkbox value="{{item.name}}" checked="{{item.checked}}">{

微信小程序radio组件 - 如何改变默认样式大小?

今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个图片或者字体啥的,感觉麻烦,后来用了下面样式可以改变radio默认样式大小: radio{ transform:scale(.8)  } 原文地址:https://www.cnblogs.com/changxue/p/8432531.html

微信小程序循环执行

循环执行 setInterval(function () { //循环执行代码 }, 1000) //循环时间 这里是1秒 原文地址:https://www.cnblogs.com/ggzhihh/p/8942903.html

微信小程序-循环(遍历)的使用

在wxml中写入循环的对象: 然后在js文件中的data中添加对象的各属性值: 效果图: 原文地址:https://www.cnblogs.com/weixiaofantasy/p/10074228.html

微信小程序app.json配置导航栏样式

1.找到app.json文件,找到window配置项 可以配置导航栏的选项有: "navigationBarBackgroundColor":#F6F6F6 // 导航栏的背景颜色 "navigationBarTextStyle":"white" // 导航栏的标题颜色,只支持balck 或者 white "navigationBarTitleText":"导航栏标题内容" // 导航栏的标题 "

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教