uniapp 对得到的数组重新排序，正序倒序，数据的本地存储和读取，以及一些基本样式的设置_uniapp排序

<template>
	<view class="content">
		<view class="buttompadding">
			<view class="row" v-for="item in note" :key="item.index">
				<view class="name">
					{{item.title}}
				</view>
			</view>
		</view>



		<view class="inputstyle">
			<input class="title" type="text" v-model="title" placeholder="请输入内容" />
			<button class="buttonstyle" @click="onpush">添加</button>

		</view>
		<view class="z">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				note: [],
				listarr: [],
				title: '',
				copytitle: ''
			}

		},
		onLoad() {
			// 在页面中保存文本到本地
			// uni.setStorageSync('note', '2023年1月要看一本书');
			// 在页面中从本地读取文本并显示在屏幕上
			// this.note = uni.getStorageSync('note');
			// console.log(this.note); // 输出 '2023年1月要看一本书'

			//页面初始化调用数据
			this.getdata()
			this.onsubmit()
		},
		methods: {
			//获取数据的getdata方法

			getdata() {
				uniCloud.callFunction({
					name: "getnotebookdata",
					data: {}
				}).then(res => {

					this.listarr = res.result.data
					// console.log(this.listarr);
					// //将数据进行重新排列，按照正序
					this.listarr.sort((a, b) => {
					  return a._id.localeCompare(b._id);
					}); 
					
					// 数据存储到本地
					uni.setStorageSync('note', this.listarr);
				})

			},
			onsubmit() {
				this.note = uni.getStorageSync('note');
				console.log(this.note); // 本地数据的读取

			},
			onpush() {
				//将数据加入数组中
				const newText = {
					title: this.title
				}; // 要添加的文本
				this.note.push(newText); // 使用 push() 方法将文本添加到本地数组中
				console.log(this.note); //打印本地数据
				this.copytitle = this.title
				this.title = ''

				//连接云函数进行数据存储
				uniCloud.callFunction({
					name: "contentupload",
					data: {
						title: this.copytitle
					}
				}).then(res => {
					console.log(res);
				})

			}



		}
	}
</script>

<style>
	.content {
		padding: 30rpx 30rpx;
	}

	.inputstyle {
		/* position的优先级要比title的高一些，需要优先设置position */
		position: fixed;
		right: 30rpx;
		left: 30rpx;
		bottom: 15px;

		background-color: #FFFFFF;

		display: flex;
		justify-content: space-between;


		.title {
			flex: 1;
		}
	}

	.name {
		padding: 15rpx 0 0;
	}

	.content {
		padding: 15rpx 30rpx 170rpx;
	}
	.z{
		background-color: #FFFFFF;
		position: fixed;
		right: 30rpx;
		left: 30rpx;
		bottom: 0;
		height: 15px;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

这是主要代码

const db=uniCloud.database();
exports.main = async (event, context) => {
	let {title}=event
	let res=await db.collection("notebook").add({
		title
	})
	return res;
};

1
2
3
4
5
6
7
8
9

这是用于添加数据的云函数

const db=uniCloud.database()
exports.main = async (event, context) => {
	let arr= await db.collection("notebook").orderBy("_id","desc").field({'title':true}).limit(15).get();
	return arr
};


1
2
3
4
5
6
7

这是用于读取数据的云函数