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

我之前是做iOS的, 安卓离职后应公司要求赶鸭子上架接过了安卓的活, 现在鸿蒙要出来了, 公司不想花钱再雇个鸿蒙开发者, 于是拥抱uniapp.

公司有个年轻人之前做过小程序,也会前端开发,公司让他学了大概一两个月,然后开始做uniapp.

而我,没有前端基础,这才学了三五天,真不知道怎么下手.

我不太习惯什么都不懂直接开干,但是领导已经建议或要求边学边做了. 所以今天尝试做起来吧.

我35岁,是一个可以合情合理辞退的年纪.

准备做的是一个列表页面, 参考同事写的一个类似页面.

uniapp新建好的空页面是这样的, .vue文件

在 pages.json 文件中配置页面,

{
			"path" : "pages/areas/daily/xxx/xxx-list",
			"style" : 
			{
				"navigationBarTitleText" : "标题",
				"enablePullDownRefresh": true //开启下拉刷新
			}
		}

在原页添加跳转到列表页的方法, 使用 uni.navigateBack 可以返回原页面

uni.navigateTo({
					url: '/pages/areas/daily/xxx/xxx-list'
				})

列表页上面有个搜索框, 是同事自定义的, 也是一个vue文件, 名为 search.vue, 同样也分 template script style 三块. 先看 template.

<template>
	<view class="content">
		……
	</view>
</template>

这是在另一个页面找到的.content定义,看来在一个页面定义的样式,在另一个页面也可以使用?

这个做过app或前端的应该一看就知道,是上下左右内边距均为40px的意思,

.content {
		padding: 40px;
	}

接着看content里的search,

<template>
	<view class="content">
		<view class="search">
			
		</view>
	</view>
</template>

下面是 search 的样式定义,

.search {
		position: relative;
		width: 85%;
		height: 40px;

	}

这块没搞明白, 为什么 position 设置为 relative, search的子元素才能正常布局.

width 属性用于设置元素的宽度. width 默认设置内容区域的宽度. search 的子元素可能不算内容区域的吧?

快下班了, 赶紧做了个页面出来,没做记录,明天再说了