20240919uniapp学习工作-自定义控件

继续看同事的自定义组件

<template>
	<view class="bg-white margin-b-10" @click="click">
		<view class="margin-r-10">
			<view class="flex-row-nowrap flex-justify-sb border-b padding-5" v-for="item in card.main">
				<view class="text-indent">
					<text v-if="item.left">{{item.left.name}} : {{item.left.value}}</text>
				</view>
				<view class="margin-r-10">
					<text v-if="item.right">{{item.right.name}} : {{item.right.value}}</text>
				</view>
			</view>
			<view class="text-indent margin-l-5">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

经过这段时间的学习, 上面代码大部分都看得懂了.

这两个样式昨天刚学过,

.flex-row-nowrap {
		display: flex;弹性盒子布局
		flex-wrap: nowrap;元素摆在一行
	}

.flex-justify-sb {
		justify-content: space-between;把元素排列好之后,剩余元素平均分配到元素之间
	}

v-for 是新东西, 学一下

v-for 指令值必须使用特殊语法 alias in expression 为正在迭代的元素提供一个别名:

比如这样的代码及效果:

<template>
	<view class="container">
		<div v-for="item in items">
			{{item.text}}
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:[{"text":"文本1"},{"text":"文本2"},{"text":"文本3"},]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

也可以为索引指定别名, 如果用在对象, 则是键值:

比如把上面代码的div部分改为

<div v-for="(item,index) in items">
			第{{index+1}}个 : {{item.text}}
		</div>

效果:

对象的遍历方式则是, 是怎么回事相信做过开发的一看就知道了.

<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

也可以在 v-for 的变量别名时使用解构:

<div v-for="{text} in items">
			{{text}}
		</div>

这种形式也可以带索引:

<div v-for="({text},index) in items">
			第{{index+1}}个 : {{text}}
		</div>

v-for 还有一些内容, 暂时看会这些就行. 

燃后这段代码就没什么不懂的了.

<template>
	<view class="bg-white margin-b-10" @click="click">
		<view class="margin-r-10">
			<view class="flex-row-nowrap flex-justify-sb border-b padding-5" v-for="item in card.main">
				<view class="text-indent">
					<text v-if="item.left">{{item.left.name}} : {{item.left.value}}</text>
				</view>
				<view class="margin-r-10">
					<text v-if="item.right">{{item.right.name}} : {{item.right.value}}</text>
				</view>
			</view>
			<view class="text-indent margin-l-5">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

继续看template中最后一段, 也没什么看不懂的了, 这都是学习的效果.

<template>
	<view class="bg-white margin-b-10" @click="click">
		……
		<view class="color-grays text-right padding-5" v-if="showEdit">
			<view class="margin-r-10 padding-r-5">
				<text class="margin-20" @click="remove">
					<uni-icons type="trash" size="20" color="#ccc"></uni-icons>
					<text class="text">删除</text>
				</text>
				<text @click="edit">
					<uni-icons type="compose" size="20" color="#ccc"></uni-icons>
					<text class="text">编辑</text>
				</text>
			</view>
		</view>
	</view>
</template>

自定义组件界面

再往下看脚本部分

<script>
	import status from 'status.js'
	export default {
		name: "custom-card",
		data() {
			return {
				property: "",
			};
		},
	}
</script>

export default 用于到处模块, 允许将一个模块中的内容默认到处, 使得其他模块可以通过 import 语句导入这个默认导出的内容.

比如上面 import status from 'status.js', status.js 代码如下:

const status = {
        ……
	}
}

export default status 其他文件就可以 import 了

data() 函数用于定义组件的状态, vue在组件的初始化阶段会调用 data() 函数获取数据对象, 并进行响应式处理, 这是实现数据绑定和响应式更新的基础.

今天就看到这吧, 灵道不喜欢我们上班时候学习, 隔一会看一下在干什么.

安卓又出问题, 又是某个品牌某个人的手机出问题, 然后自己这边几个测试机都无法重现的问题.

做了安卓开发后, 听到安卓两个字都恶心.