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
}