多规格选择样式/问卷调查选择（小程序）

第一次写博客，是直接写还是，走流程？

没人告诉我，那我就直接切入主题好了。

今天一个小伙伴问我：那个问卷调查题目选中状态显示怎么做？

我整理了一下，感觉这个挺实用，然后想着和大家分享一下！

对对，就是下面这种：

注意了，直接贴代码了！

<view><block wx:for="{{brandItems}}" wx:key="id"><view class="brand"><text style="margin-left: 18rpx;">{{item.brand_id}}. {{item.brand_name}}</text><view class="brand_row"><view wx:for="{{item.brand_List}}" wx:for-item="brand" class="brand_items {{brand.checked ? 'active' : ''}}" data-brandname="{{item.brand_name}}" data-value="{{brand.value}}" bindtap="checkOrUcheck" data-id="{{item.brand_id}}">{{brand.value}}</view></view></view></block>
</view>

 brandItems: [{brand_id: 1,brand_name: "水",brand_List: [{value: "天山泉水",checked: false}, {value: "深井水",checked: false}, {value: "矿泉水",checked: false}, {value: "白开水",checked: false}]},{brand_id: 2,brand_name: "雷",brand_List: [{value: "球形闪电",checked: false}, {value: "落雷",checked: false}, {value: "九霄神雷",checked: false}, {value: "五彩劫雷",checked: false}]},{brand_id: 3,brand_name: "木",brand_List: [{value: "太乙青木",checked: false}, {value: "阴沉木",checked: false}, {value: "金丝楠木",checked: false}, {value: "木讷",checked: false}]},{brand_id: 4,brand_name: "金",brand_List: [{value: "沉银",checked: false}, {value: "千年陨铁",checked: false}, {value: "深潭寒铁",checked: false}, {value: "钢铁",checked: false}]},{brand_id: 5,brand_name: "火",brand_List: [{value: "虚无吞炎",checked: false}, {value: "青莲鬼火",checked: false}, {value: "佛怒火莲",checked: false}, {value: "炎姬",checked: false}]},{brand_id: 6,brand_name: "土",brand_List: [{value: "魂肉",checked: false}, {value: "五色土",checked: false}]}],checkOrUcheck: function(e) {let that = this;let brandName = e.currentTarget.dataset.brandname;let value = e.currentTarget.dataset.value;let oldBrandItems = that.data.brandItems;for (let i = 0; i < oldBrandItems.length; i++) {if (oldBrandItems[i].brand_name === brandName) {for (let j = 0; j < oldBrandItems[i].brand_List.length; j++) {if (oldBrandItems[i].brand_List[j].value==value) {if (oldBrandItems[i].brand_List[j].checked) {oldBrandItems[i].brand_List[j].checked = false} else {oldBrandItems[i].brand_List[j].checked = true}} else {//注意：下面这句话，注释了就是多选/不注释就是单选oldBrandItems[i].brand_List[j].checked = false}}}}that.setData({brandItems: oldBrandItems})},

.brand{height: 142rpx;font-size: 30rpx;padding-top: 18rpx;border-bottom: 2rpx solid #dedede;
}.brand_row{
display: flex;
flex-direction: row;
}.brand_items{display:flex;margin-left: 18rpx;margin-top: 18rpx;margin-bottom: 18rpx;width:161rpx;height:54rpx;font-size: 30rpx;align-items: center;justify-content: center;border-radius: 8rpx;border:2rpx solid gray;
}.brand_items.active{
background:#e21020;
color:#fff;
} .check{display:flex;align-items: center;justify-content: center;color:gray;font-size: 34rpx;font-weight: 700;width:335rpx;height:80rpx;position: fixed;margin-left: 18rpx;margin-right: 18rpx;margin-top: 30rpx;bottom: 30rpx;border-radius: 10rpx;border:2rpx solid gray;
}.navigator-hover {color: #e21020;
}

好了，代码贴完了！

ps：刚学的时候在这找的案例源码都是不全的，对于小白来说特别不友好，所以，我的代码会很全很全很全.....

有兴趣的小伙伴可以加qq群一起交流，qq群：635248448

多规格选择样式/问卷调查选择（小程序）相关推荐

如何选择适合自己的小程序开发框架
随着微信.支付宝等开放平台的壮大,移动应用生态市场的蓬勃发展,例如小程序已经成为各个企业和开发者的重要选择.为了提高小程序的开发效率和代码重用性,许多第三方开发框架应运而生. 准备为需要的朋友整理一些 ...
如何选择社区团购小程序
首先,需要了解的是社区团购的模式,商家以小区为单位招募小区业主或小区店主成为团长,创建公司控群的小区业主微信群,团长在群内发布团购商品,消费者通过团长分享的推广链接下单,商家根据订单量配送至小区团长处 ...
wxml修改样式_微信小程序wxml和wxss样式
对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...
微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
微信小程序的多选改变样式_微信小程序button选中改样式-实现单选/多选
小程序实现多button单选/多选红色为选中状态单选多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
ithoughts怎么自定义样式_微信小程序自定义导航栏组件封装
相信很多小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求,不够要说明的是小程序右上角的胶囊是不能自定义的哦,除了胶囊其他地方都是可以根据自己的项目而定了,在一次小程序开发中就需要对顶部进行自定 ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

多规格选择样式/问卷调查选择（小程序）

第一次写博客，是直接写还是，走流程？

多规格选择样式/问卷调查选择（小程序）相关推荐

最新文章

热门文章