一.样式展示

二.代码展示

<view class="left"><image mode="widthFix" src="../../images/equipmentControl/sc.png" class="pic2"></image><text class="sfz1" style="padding-left: 0;padding-top: 18rpx;">杀虫灯</text><view class="sfz"><view class="{{cur3==index? 'sja2':'sja'}}" wx:for="{{list2}}" id="{{index}}"     bindtap="toindex3">{{item}}</view></view>
</view>

//未选中样式
.left .sfz .sja{width: 96rpx;height: 52rpx;background-color: #00b649;border-radius: 6px;font-size: 27rpx;letter-spacing: 0px;color: #ffffff;line-height: 52rpx;text-align: center;margin-left: 20rpx;
}
//选中样式
.left .sfz .sja2{width: 96rpx;height: 52rpx;background-color: #c9b71b;border-radius: 6px;font-size: 27rpx;letter-spacing: 0px;color: #ffffff;line-height: 52rpx;text-align: center;margin-left: 20rpx;
}

data{cur3:0,list2:['倾倒','光控','雨控','灯管','温控'],
},
toindex3(e){//e.currentTarget.id选中项的下标（从0开始）var idx=parseInt(e.currentTarget.id);this.setData({cur3:idx})}

微信小程序编写选项样式相关推荐

uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期数据绑定(核心知识) 数据绑定的运算与逻 ...
视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...
使用React Native 和微信小程序编写的一款阅读类app ———《轻松一刻》
一款纯React Native原生代码和微信小程序编写的app React Native源码地址:https://github.com/azhon/Time 微信小程序源码地址:https:// ...
微信小程序动态修改样式
前言微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式一.wxml <view class="fb_tips"wx:for="{{arr11 ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
微信小程序自定义checkbox样式
微信小程序自定义checkbox样式 checkbox .wx-checkbox-input{width:16px;height:16px;} checkbox .wx-checkbox-input. ...
微信小程序css卡片样式（带阴影效果）
微信小程序css卡片样式(带阴影) 效果图 wxml代码 <view class="card"></view> css样式 .card{width: 90% ...
微信小程序编写一个试卷demo
最近写项目需要有一个试卷功能,作为初学者一头雾水,网上找了些资料.非常感谢才华横溢吴道简大佬写的答题小程序.参考了大佬的文章,自己做了一点点修改.欢迎大佬指点.原文链接:http://t.csdn ...

微信小程序编写选项样式

一.样式展示

二.代码展示

微信小程序编写选项样式相关推荐

最新文章

热门文章