1. Flexbox布局
display:flex 会导致元素弹性排列，所以很容易！换行失败，即t-row和t-col失效
2.让子元素全部水平居中
方法一：元素使用块级元素：display: inline-block; 尽量少使用flexbox布局！容易使得元素乱飞
<t-col span="6" style="text-align: center;">
<div style="display: inline-block;">
<t-icon name="fact-check" size="30px" bind:click="onIconTap" style="color: #d81e06; margin-top: 4px;"></t-icon>
</div>
<div style="font-size: 10px; font-weight: bold; display: inline-block;">审核通知</div>
</t-col>方法二：flexbox布局：能让t-row的子元素在整个t-row水平正中间
<t-row style="display: flex; justify-content: center; width: 100%;">
</t-row>3. 让子元素全部垂直居中
方法一：Flexbox布局
在要居中的父元素中运用
display: flex; /*弹性布局，让子元素可以放在随意位置,不然名字会过行*/
align-items: center; /* 让子元素垂直居中 */方法二：Gird布局【i think better】
在要居中的父元素中：display: grid;
要居中的元素：align-self: center;
注意！！！
对于<p>在<t-row>的垂直居中，align-self: center;要加在真正没居中（用F12辅助确定）的<t-col>而不是直接加在<p>上。
<div class="detailShow" style="padding:2%; margin-left: 22%; margin-bottom: 2%; margin-top: 5% ;margin-right: 10%;">
<t-row>
<t-col span="4">
<t-image :src="imageSrc" mode="aspectFill" width="36" height="36"/>
</t-col>
<t-col span="20" style="align-self: center;"> <!-- 注意！要加在这里而不是p！ -->
<p style=...>
勇敢少先队
</p>
</t-col>
</t-row>
</div>4. 一条分割线
<div style="border-bottom:1px solid #f2f2f2; margin-bottom: 2%;"></div> 效果：
5. vue和html中关于函数定义、实现、修改变量的不同
vue: 事件绑定使用指令 v-on 或缩写 @ 来绑定事件
<template>
<button @click="handleClick">Click Me</button>
</template>
<script>
export default {
methods: {
handleClick() {
alert('Clicked!');
}
}
}
</script>
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
function handleClick() {
alert('Button clicked!');
}
document.getElementById('myButton').onclick = handleClick;
</script>
</body>
</html>
5. TDesign中t-col可以直接用 @click="onNotification"绑定事件（同样在methods中实现函数体）
6. vue 和 TDesign官网的代码的不同
① 在 Vue 中，事件绑定使用的是 @event 而不是 bind:event。
② Vue 中处理数据变更时使用的是 this.$set 或直接修改绑定的数据，而不是 this.setData。
比如搜索框:
官网：
<t-search
value="{{value}}"
center
placeholder="搜索预设文案"
action="{{actionText}}"
bind:blur="blurHandle"
bind:focus="focusHandle"
bind:action-click="actionHandle"
bind:change="changeHandle"
/>
changeHandle(e) {
const { value } = e.detail;
this.setData({
value,
});
},
focusHandle() {
this.setData({
actionText: '取消',
});
},
...//省略actionHandle等函数而vue中应该：
<t-search
:value="value"
center
placeholder="请输入关键字"
:action="actionText"
@blur="blurHandle"
@focus="focusHandle"
@action-click="actionHandle"
@change="changeHandle"
shape="round"
/>
changeHandle (e) {
// const { value } = e.detail，这里用{}是解构赋值，当右值为对象时，用{},而没加{}是普通赋值
const value = e.target.value
this.value = value
},
focusHandle () {
this.actionText = '取消'
},6. 搜索框组件
效果：
代码：
<t-search
:value="value"
center
placeholder="请输入关键字"
@blur="blurHandle" <!--从搜索框移开焦点时触发。例如，当用户在完成输入后点击搜索框外的其他区域，搜索框会失去焦点，这时 blur 事件被触发 -->
@focus="focusHandle" <!--在搜索框获得焦点时触发。当用户点击搜索框准备输入内容时，focus 事件会被触发 -->
@action-click="actionHandle" <!--在搜索框的搜索按钮（如果有的话）被点击时触发 -->
@change="changeHandle" <!--在搜索框的输入内容发生变化时触发。无论是添加、修改还是删除文字，只要输入内容有变动，change 事件就会被触发 -->
@clear="clearHandle" <!--当搜索框的X被点击时触发（单纯删除所有内容不会触发） -->
shape="round"
/>实现筛选数据的代码：
<div v-for="person in filteredPeople" :key="person.id" class="people">computed: {
// 在Vue.js框架中，computed 属性的依赖关系是自动跟踪的，这是通过Vue的响应式系统实现的。当你在一个computed属性的函数中访问响应式数据（如data中的属性或其他computed属性），Vue会自动将这些数据记录为依赖
// 所以此时computed依赖于this.value，当value的值改变时，自动执行此函数
filteredPeople () {
const keyword = this.value.trim().toLowerCase()
if (!keyword) {
return this.people
}
return this.people.filter(person =>
person.name.toLowerCase().includes(keyword)
)
}
}7. Toast轻提示
JS：直接写在vue的method里面就可以，但是记得去掉context: this,因为官方文档是wx小程序原生js，Toast定义在Components中，所以要用context:this表示指向当前组件的实例，而用vue的话，函数直接写在method中，所以不是作为组件。
showWarningToast () {
Toast({
// context: this,
selector: '#t-toast',
message: '警告文案',
theme: 'warning',
direction: 'column'
})
}对应的html：
<t-toast id="t-toast" />8. Vue的mounted钩子
mounted钩子函数在 Vue 实例挂载到 DOM 后立即调用。这意味着当组件的模板和数据已经被渲染到页面上之后，mounted钩子函数会被执行。这个阶段适合进行 DOM 操作、启动异步请求或其他初始化任务。
9. 页面跳转+参数传递
跳转前的界面：
根据点击的ID，到list中寻找对应的name，然后跳转页面，并传递name
OnClick (auditId) {
const audit = this.auditList.find(item => item.id === auditId)
wx.navigateTo({
url: '/pages/audit_community_need/main?Name=' + audit.name
})
}跳转后的界面：
onLoad (options) {
console.log(options.Name)
this.fetchShowData(options.Name)
},10. 展示多张图片+点击预览对应图片
涉及两个组件——多个照片展示的轮播图 & 图片预览
① 轮播图（其实不是真正意义的轮播图，不用自动播放）
<t-swiper style="margin-left:8%;margin-right: 8%;margin-top:5%;"
:current="show.current"
:autoplay="false"
:navigation=" { type: 'dots' } "
:list="show.swiperList"
:loop="false"
@click="onTap"
@change="onChange"
>
</t-swiper>注意！data中的current只是表示加载页面完成后最开始定位在哪个！，如果要定位当前用户划到了哪个图，要结合onchange
show: {
current: 0, // 只是初始化时会锁定在哪个页面而已！
imageCurrent: 0, // 自定义
swiperList: [
`https://tdesign.gtimg.com/mobile/demos/swiper1.png`,
`https://tdesign.gtimg.com/mobile/demos/swiper2.png`,
`https://tdesign.gtimg.com/mobile/demos/swiper1.png`,
`https://tdesign.gtimg.com/mobile/demos/swiper2.png`,
`https://tdesign.gtimg.com/mobile/demos/swiper1.png`
]
} onChange (e) {
// console.log('change')
// console.log(e.target.current)
this.show.imageCurrent = e.target.current
},② 点击图片实现大图预览
<t-toast id="t-toast" />
<t-image-viewer
usingCustomNavbar
:deleteBtn="deleteBtn"
:closeBtn="closeBtn"
:showIndex="showIndex"
:visible="visible"
:images="images"
@close="onClose"
></t-image-viewer>当点击轮播图时，触发click，调用onTap函数：(前面通过onchange函数，定位到当前页面imageCurrent)
onTap (e) {
this.images = []
this.images.push(this.show.swiperList[this.show.imageCurrent])
this.showIndex = false // 显示'1/1'
this.visible = true
},
onClose () {
this.visible = false
}
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
