método de paginación del subprograma WeChat uniapp: complemento de paginación uni-paginación y paginación desplegable, actualización de carga desplegable, actualización de regreso a la parte superior

1. Complemento de paginación uni-paginación

Primero vaya al mercado de complementos uniapp para instalar el complemento de paginación:

sitio web oficial de uni-app https://uniapp.dcloud.io/component/uniui/uni-pagination.html#%E4%BB%8B%E7%BB%8D uni-pagination pager - DCloud plugin market Pagination pager componente, Usado para mostrar números de página, solicitar datos, etc. https://ext.dcloud.net.cn/plugin?name=uni-paginación

 Después de la instalación. Instrucciones:

					<!-- 分页 -->
					<view class="paging extend-text-right extend-mr-50 extend-mt-40 extend-mb-40">
						<uni-pagination :current="paginationObj.current" :total="paginationObj.total" title="分页组件"
							:show-icon="true" @change="handleCurrentChange()" />
						<view class="btn-view">
							<view>
								<text
									class="example-info">当前页：{
   
   { paginationObj.current }}，数据总量：{
   
   { paginationObj.total }}条，每页数据：{
   
   { paginationObj.size }}</text>
							</view>
						</view>
					</view>

		data() {
			return {
				paginationObj: {
					current: 1, // 当前页
					size: 10, // 每页条数
					pages: 1, // 总页数
					total: 0 // 总条数
				}
			};
		},

//方法

			/**
			 * 当前页改变事件
			 **/
			handleCurrentChange(val) {
				console.log(val)
				this.paginationObj.current = val.current
				this.getPagelist()
			},

Haga clic manualmente en la paginación. La página no vuelve automáticamente a la parte superior. Aquí se explica cómo volver a la cima

2. Tire hacia arriba de la paginación

¿Qué página quieres usar? Simplemente agregue onReachBottonDistance a la configuración de ruta de qué página

Ahora configura en pages.json:

"onReachBottonDistance": 0 // cuando la distancia es de 50 px desde el fondo, se activa el evento onReachBottom

Código:

		onReachBottom() {
			// 触底的时候请求数据，即为上拉加载更多
			if (this.paginationObj.current * this.paginationObj.size < this.paginationObj.total && !this.isLoadMore) {
				this.isLoadMore = true
				this.paginationObj.current++
				this.getInfoList()
			} else {
				this.isLoadMore = false
			}
		},

3. Después de actualizar la página, vuelva a la parte superior

Este código es adecuado para agregar al hacer clic manualmente en la paginación

	// 回到顶部
							uni.createSelectorQuery().select(".search-result-toggle-part")
								.boundingClientRect(data => { //目标节点
									uni.createSelectorQuery().select(".more-list-page")
										.boundingClientRect((res) => { //最外层盒子节点
											uni.pageScrollTo({
												duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
												scrollTop: res.top - data
													.top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
											})
										}).exec()
								}).exec();

material:

Cómo implementar paginación deslizante hacia arriba y actualización desplegable en uni-app: libro breve https://www.jianshu.com/p/c3f2007c6776

uniapp implementa paginación desplegable para cargar datos Antes del inicio oficial, se presentan dos funciones: onPullDownRefresh define la función de procesamiento onPullDownRefresh en js (mismo nivel que las funciones del ciclo de vida como onLoad) y escucha el evento de actualización desplegable del usuario de la página. Debe encontrar el nodo de páginas de la página actual en pages.json y habilitar enablePullDownRefresh en la opción de estilo. Cuando se procesa la actualización de datos, uni.stopPullDownRefresh puede detener la descarga de la página actual https://blog.csdn.net/qq_42581563/article/details/114079019

Programa pequeño (uniapp): realiza la función de paginación Cuando los datos se están cargando, solicitará la carga; cuando se carguen los datos, indicará que no hay datos. El tiempo de paginación (activación) utiliza el evento de fondo de la vista de desplazamiento del applet. Para solicitar los datos de la solicitud de datos, use el operador de propagación para realizar el empalme de datos […datos, …res.datos] Cuántos datos se solicitan cada vez, la página actual y la cantidad total de datos deben entenderse después la solicitud de datos se completa, desaparece durante la carga y no se muestra ninguna pantalla Implementación específica de datos Qué se debe hacer para inicializar la variable al final Modificar el parámetro pageNo (página actual) += pageSize (saltar algunas páginas) Reenviar la solicitud rushList https://blog.csdn.net/qq_38845858/article/details/107624619