{
isMine: false, // 是否为雷
mineTag: false, // 手动添加是否是雷的标识
isBoom: false, // 是否点击到了雷
mineNum: 0, // 周围雷数
showNum: false, // 是否显示雷数
value: 0, // 等同于id
position: [0, 0], // 标志在第几行第几列
},
应该在js里面
<!-- 用印类型-弹框实现 -->
<view class="forItemBorder">
<!-- 用印弹窗 -->
<view class="weui-cell weui-cell_input" bindtap="showDialogBtn">
<view class="weui-cell__hd">
<view class="weui-label">公章类型</view>
</view>
<view style="width: 440rpx;">
<input type="text" class="weui-input" name="sealType" value="{{sealType}}" placeholder-style="color:#B2B2B2"
placeholder="请选择公章类型" disabled="disabled" />
</view>
<view class='weui-cell__ft arrow_right'></view>
</view>
<!-- 遮罩层 -->
<view class="modal-mask" wx:if="{{showModal}}"></view>
<!-- 弹出框 -->
<view class="modal-dialog" wx:if="{{showModal}}">
<view class="modal-content">
<checkbox-group data-index="{{index}}" bindchange="checkboxChange" name="sealType">
<label class="checkbox" wx:for="{{sealTypeList}}" wx:key="key" wx:for-item="item">
<checkbox value="{{item.id}}" checked="{{item.checked}}" color="#2A98BD" />
<view class="checked_label" style="color:#37383B">{{item.gzkind}}</view>
</label>
</checkbox-group>
</view>
<!-- 操作按钮 -->
<view class="modal-footer">
<button class="btn btn-cancel" bindtap="onCancel" data-status="cancel">取消</button>
<button class="btn btn-confirm" bindtap="onConfirm" data-status="confirm">确定</button>
</view>
</view>
</view>
// 后台传过来的公章对象数组用sealTypeList 接收
checkboxChange: function (e) {
let that = this;
let sealTypeList = this.data.sealTypeList;
// 若之前已选择公章,将其回显打勾
for (let i = 0; i < sealTypeList.length; i++) {
sealTypeList[i].checked = false;
}
let indexes = e.detail.value;
for (let i = 0; i < indexes.length; i++) {
indexes[i] = parseInt(indexes[i]);
// 多选框从1开始,数组下标从0开始,所以需要减1
sealTypeList[indexes[i] - 1].checked = true;
}
// 直接将整个list赋值回去
this.setData({
sealTypeList: sealTypeList
})
},
// 用户点击确定
onConfirm: function () {
let that = this;
let seals = [];
let sealTypeList = this.data.sealTypeList;
sealTypeList.forEach(function (e) {
if (e.checked) {
// gzkind是对象的一个属性,表示具体公章类型名的字符串
seals.push(e.gzkind);
}
});
// 显示到wxml上
this.setData({
sealType: seals.join(",")
})
// 隐藏弹出的对话框
//this.hideModal();
},
// 用户点击取消
onCancel: function () {
let that = this;
let sealTypeList = this.data.sealTypeList;
// 获取上一次选择的用印类型字符串(规定用,隔开)
let gzkind = this.data.sealType || "";
// 放弃当前的勾选,原来谁checked,谁就checked
sealTypeList.forEach(function (e) {
e.checked = false;
});
if (gzkind !== "") {
gzkind = gzkind.split(",");
for (let i = 0; i < gzkind.length; i++) {
for (let j = 0; j < sealTypeList.length; j++) {
let e = sealTypeList[j];
if (e.gzkind == gzkind[i]) {
e.checked = true;
}
}
}
}
this.setData({
sealTypeList: sealTypeList
});
// 将弹出的对话框隐藏
// this.hideModal();
},
在微信小程序开发中,应该将页面布局、样式等放在wxml文件中,具体表现为视图层、模板引用、组件定义等;而一些交互逻辑和数据处理则应该放在js文件中,具体表现为页面的生命周期函数、事件绑定、接口请求等。至于样式,则应该放在wxss文件中,用来定义页面的样式和布局等。具体的代码实现可以参照参考资料中的示例进行编写。