codecamp

MorJS 添加组件

组件配置

  1. 在 src/components 下创建文件夹 delete-check 用于存放删除 Todo 功能相关的组件
  2. 在该文件夹下创建小程序组件的四个基础文件 delete-check.wxml delete-check.less delete-check.ts delete-check.json
  3. 在需要使用到该组件的页面 todos.json 中配置引入该组件
// src/pages/todos/todos.json
{
"usingComponents": {
"add-button": "../../components/add-button/add-button",
"delete-check": "../../components/delete-check/delete-check"
}
}

   4. 在需要使用到该组件的页面 todos.wxml 中使用引入的组件

<!-- src/pages/todos/todos.wxml -->
<view class="page-todos">
...
<!-- 删除确认弹窗 -->
<delete-check wx:if="{{showDeleteCheck}}" checkIndex="{{checkIndex}}" onCancelDel="onCancelDel" />
</view>

组件功能

1. 删除入口:首页 src/pages/todos 需要添加一下删除的触发入口,修改一下首页的样式,js 中需要增加点击删除方法,并把该项的 index 传给组件,用于标记哪一项的内容需要被删除,同时添加一个方法 onCancelDel 用于设置 showDeleteCheck 为 false 关闭删除确认框。

<!-- src/pages/todos/todos.wxml -->
<label wx:for="{{todos}}" wx:for-item="item" class="todo-item {{item.completed ? 'checked' : ''}}" wx:key="{{index}}">
...
<view class="todo-item-del" bindtap="delTodo" data-index="{{index}}">删除</view>
</label>
// src/pages/todos/todos.ts
import { wPage } from '@morjs/core'

wPage({
data: {
checkIndex: '',
showDeleteCheck: false
},
// 打开删除框
delTodo(e) {
const index = e.target?.targetDataset?.index || e.target?.dataset?.index
this.setData({
checkIndex: index,
showDeleteCheck: true
})
},
// 关闭删除框
onCancelDel(e) {
this.setData({
todos: app.todos,
checkIndex: '',
showDeleteCheck: false
})
}
})
/* src/pages/todos/todos.less */
.todo-item-del {
margin: 0 20rpx;
color: crimson;
}

2. 删除功能:

  • xml 文件用于显示弹窗的浮层,其中一个确认删除按钮用于触发删除,一个取消按钮用于关闭弹窗
  • css 文件编辑页面样式
  • js 文件中,对页面传入的 index 对应的内容进行保存,提供给 xml 中显示,并添加一个删除方法和一个关闭弹窗方法提供给 xml 点击触发
<!-- src/components/delete-check/delete-check.wxml -->
<view class="delete-check-bg">
<view class="delete-check">
<view class="delete-check__text">确认删除「{{text}}」</view>
<view class="delete-check__btn-box">
<view class="btn-del" bindtap="del">删除</view>
<view class="btn-cancel" bindtap="cancel">取消</view>
</view>
</view>
</view>
// src/components/delete-check/delete-check.ts
import { wComponent } from '@morjs/core'

// 获取全局 app 实例
const app = getApp()

wComponent({
props: {
checkIndex: '',
onCancelDel: () => {}
},
data: {
text: ''
},
created() {
const text = app.todos[this.props.checkIndex].text
this.setData({ text })
},
methods: {
del() {
app.todos.splice(this.props.checkIndex, 1)
this.cancel()
},
cancel() {
this.props.onCancelDel()
}
}
})
/* src/components/delete-check/delete-check.less */
.delete-check-bg {
width: 100vw;
height: 100vh;
background-color: rgba(#fff, 0.6);
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
.delete-check {
width: 400rpx;
border: 1rpx solid #ccc;
background: #fff;
border-radius: 8rpx;
}
.delete-check__text {
padding: 50rpx 30rpx;
text-align: center;
}
.delete-check__btn-box {
display: flex;
align-items: center;
.btn-del {
width: 50%;
text-align: center;
color: crimson;
padding: 20rpx;
border: 1rpx solid #ccc;
border-right: none;
}
.btn-cancel {
width: 50%;
text-align: center;
padding: 20rpx;
border: 1rpx solid #ccc;
}
}
}
// src/components/delete-check/delete-check.json
{
"component": true
}

3. 通过上述流程后,我们在 todo list 的每一项后面都会有一个「删除」按钮,点击将会打开删除弹窗,点击删除后即可删除该项,以上,恭喜你学会了怎么添加和编辑组件代码![[EMOJI:%F0%9F%8E%89]] [[EMOJI:%F0%9F%8E%89]] [[EMOJI:%F0%9F%8E%89]]



MorJS 添加页面
MorJS 成果展示
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

MorJS 指南

MorJS 基础用法

MorJS 配置

MorJS 编译相关配置

MorJS 进阶用法

MorJS Web开发

MorJS Web开发介绍

MorJS Web开发快速上手

MorJS Tabbar IOS 小黑条适配开关

MorJS 社区

MorJS 规范

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }