微信小程序点击一个选项,跳出弹窗,是否勾选接下来十个单词,点击确定返回原界面自动勾选给单词以后的十个单词 代码
时间: 2024-03-03 15:52:49 浏览: 131
微信小程序 题库:选择选项,切换至下一题(截图+代码).zip
以下是一个简单的示例代码,实现了在弹窗中勾选单词并将勾选状态传递回原界面,同时在原界面中自动勾选单词的功能:
在弹窗页面(popupPage)中:
```
// 在页面data中定义一个变量,用于记录单词列表和勾选状态
data: {
words: ['apple', 'banana', 'cherry', 'date', 'eggplant', 'fig', 'grape', 'honey', 'ice cream', 'juice', 'kiwi', 'lemon'],
checked: []
},
// 当用户点击某个单词的复选框时,更新勾选状态
checkboxChange: function(e) {
this.setData({
checked: e.detail.value
})
},
// 当用户点击确定按钮时,执行回调函数并关闭弹窗
confirm: function() {
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.setData({
checkedWords: this.data.checked
});
wx.navigateBack({
delta: 1
})
}
```
在原界面中:
```
// 在页面data中定义一个变量,用于记录勾选状态
data: {
checkedWords: []
},
// 当用户点击选项时,跳转到弹窗页面
showPopup: function() {
wx.navigateTo({
url: '/pages/popupPage/popupPage',
})
},
// 在页面onShow时,根据勾选状态自动勾选单词
onShow: function() {
let index = this.data.words.indexOf(this.data.checkedWords[0]);
for (let i = 1; i <= 10; i++) {
let word = this.data.words[index + i];
if (this.data.checkedWords.indexOf(word) !== -1) {
this.setData({
['words[' + (index + i) + '].checked']: true
})
}
}
}
```
需要注意的是,以上代码仅供参考,具体实现细节可能会因为业务需求而有所不同。
阅读全文