Vue Ecology — мультитерминальное решение с единым приложением
Время обновления 09:26, 2021
Поскольку этот документ занимает высокие позиции в поисковых системах, он обновляется по принципу решения проблем для всех.
это мой гитхабgithubУказанные ниже адреса могут быть недействительными.
Выпадающее обновление экологии единого приложения Исходный код
<template>
<!-- <view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="">
123
</view>
</view> -->
<view class="content">
<ItemComp :item="item" v-for="(item,index) in list" :key="index" />
<!-- 底部文案 -->
<view class="">
<text >{{status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore)}}</text>
</view>
</view>
</template>
<script>
import ItemComp from '../../components/item.vue'
export default {
data() {
return {
title: 'Hello',
url:`https://reqres.in/api/users`,
list:[],
page:1,
per_page:10,
status:'more', // 默认展示上拉显示更多
contentText:{
contentdown: "上拉显示更多",
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了"
}
}
},
components:{
ItemComp
},
onShow() {
this.page =1
this.per_page = 10
this.list = []
},
onLoad() {
// 页码归为第1页
this.page = 1
// 初始化获取列表数据
this.fetchData()
},
// 下拉刷新触发
onPullDownRefresh(val){
this.page = 1
this.per_page = 10
console.log('下拉刷新',val)
this.fetchData().then(()=>{
uni.stopPullDownRefresh();
}).catch(err=>{
uni.stopPullDownRefresh();
// 弹窗提示
uni.showToast({
title: '请求出错了',
icon: 'none'
})
})
},
// 上拉加载触发
onReachBottom(){
// 改变状态为加载中
this.status = 'loading'
// 页码发生变化
++this.page
// 加载更多
this.fetchData('loadMore').then(resArray=>{
// 此时判断当前有没有请求到数据
if(resArray.length){
this.status = 'more'
}else{
this.status = 'noMore';
--this.page;
}
}).catch(err=>{
console.log('网络请求失败')
})
},
methods: {
fetchData(way){
return new Promise((resolve,reject)=>{
uni.request({
url:this.url,
data:{
page:this.page,
per_page:this.per_page
},
success: (res) => {
console.log(res)
// 当页的数据
const resDataArray = res.data.data
if(way==='loadMore'){
this.list = this.list.concat(resDataArray)
}else{
this.list = resDataArray
}
// 抛出当页的数据
resolve(resDataArray)
},
fail(err) {
console.log('接口调用失败',err)
// 抛出异常
reject()
}
})
})
}
}
}
</script>
<style>
/* .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} */
.content{
width: 100%;
}
</style>
Потяните страницу списка вверх, чтобы загрузить больше, потяните вниз, чтобы обновить эффект
Легко реализуйте загрузку с подтягиванием, обновление с раскрывающимся списком и возврат наверх
добиться эффекта
Предварительная подготовка
внутренний интерфейс
В этом небольшом случае мы используем открытый исходный кодjsonplaceholder, который также является тестовым интерфейсом, обычно используемым в нашем внешнем интерфейсе.Для того, чтобы добиться эффекта небольшой демки, используйте пока это, а потом замените на douban-api
даже нам не нужноmockинтерфейс, а самое главное — поддержка分页запрос, параметры запроса
- offset
- limit
Те, кто написал предысторию, должны быть правы насчет этих двух字段не чужой,offsetдаКомпенсироватьзначит, это вnestНа официальном сайте также упоминается
{
"page":1,
"limit":10
}
При запросе аналогично этому информация пройденной страницы, но параметры которые мы вводим
{
"_offset":xx, // 其中xx 代表的是第几页
"_limit":xx // 其中xx 代表的是每页多少条数据
}
Ниже вводим в адресную строку браузера (или используем плагин postman|postwoman|Vscode)https://jsonplaceholder.typicode.com/posts
Возвращаемый результат:
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
}
]
……
Затем делаем подтягивание, чтобы загрузить больше.Самое главное, что номер страницы каждый раз меняется
_offset++;
API сетевых запросов единого приложения
На официальном сайте четко указано, что мы можем пройтиuni.request(OBJECT), который передается в объекте конфигурации, стоит отметить, что по умолчаниюGETпросить
uni.request({
url: "https://jsonplaceholder.typicode.com/posts", //请求的地址
success: res => {
console.log(res);
}
});
Товар предмет
Мы знаем, что при разработке фронтенда по бэкендуlistгенерация циклаitemэлемент является очень распространенным бизнес-требованием, то следующее上拉加载更多а также下拉刷新. Итак, в этом небольшом случае мы используем卡片макет. Рекомендуется всем, кто официально обслуживаетсяhello-uniapp
-
гитхаб передача, который поддерживает множество общих эффектов. Здесь мы стараемся изо всех сил
cloneПоследний код, потому что он все еще очень часто обновляется, в основном для решения некоторых проблем на разных устройствах.bug
Do it
- Получить данные асинхронно
// 异步获取列表数据
getDataList() {
uni.request({
url: 'https://jsonplaceholder.typicode.com/posts', //仅为示例，并非真实接口地址。
success: (res) => {
console.log(res)
}
});
},
В этом случае получаются все данные, которые не соответствуют спецификации в реальной разработке.
- Внедрить плагины
Как правило, мы ожидаем, что при зацикливании данных списка будет下拉刷新так же как下拉加载Лучше всего иметь эффект возвращения в топ.В данный момент мы используем стороннюю библиотеку.Я думаю, что она по-прежнему очень проста в использовании.
Изысканная инфраструктура js с выпадающим обновлением и подтягивающей загрузкой.Поддержка vue, идеальная работа в мобильных и основных браузерах ПК.В настоящее время количество звезд2.8K
Его также можно использовать в других решениях для разработки, конечно, естьuniappверсии, прежде чем использовать ее, давайте взглянем на раздел макета структуры
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
<view v-for="(item,index) in dataList" :key="`item${index}`"> </view>
</mescroll-body>
в
| свойство или метод | имея в виду |
|---|---|
| ref="mescrollRef" | Апплет ByteDance ref="mescrollRef" должен быть настроен |
| @init="mescrollInit" | должен быть настроен |
| @down="downCallback" | должен быть настроен |
| @up="upCallback" | должен быть настроен |
| :down="downOption" | Общие конфигурации для раскрывающегося обновления |
| :up="upOption" | Общие конфигурации для вытягивания загрузки |
Так как нам нужно использовать этот эффект во многих местах проекта, мы просто вводим его глобально и регистрируем как глобальный компонент
// 在main.js注册全局组件
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
Vue.component("mescroll-body", MescrollBody);
Vue.component("mescroll-uni", MescrollUni);
- Конфигурация страниц.json
{
"path": "pages/findMovie/findMovie",
"style": {
"navigationBarTitleText": "找片",
"enablePullDownRefresh": false,
"app-plus": {
"bounce": "none" //删除此项: mescroll-body支持iOS回弹
}
}
},
Есть два основных метода
| метод | имея в виду |
|---|---|
| upCallback(page) | Подтягивающий обратный вызов загрузки |
| downCallback() | потянуть вниз обратный вызов обновления |
Прежде чем перейти к следующей части, нам нужно знать данные, возвращаемые интерфейсом.总页数Как рассчитать, то есть данные, возвращаемые интерфейсом, обычно возвращаютtotal
Math.ceil(5 / 2);
Math.ceil(26 / 10);
Math.ceil(100 / 10);
Math.ceil(20 / 4);
- основной код
/*上拉加载的回调*/
upCallback({num,size}) {
// console.log(num,size) // 1,10
uni.request({
url: `https://jsonplaceholder.typicode.com/posts`,
data: {
_offset: num,
_limit: size
},
success: (data) => {
// 接口返回的当前页数据列表 (数组)
let curPageData = data.data;
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
let curPageLen = data.data.length;
// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
let totalPage = Math.ceil(100/size); // 向上取正
// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
let totalSize = 100;
// 接口返回的是否有下一页 (true/false)
// let hasNext = data.xxx;
//设置列表数据
if (this.mescroll.num == 1) this.dataList = []; //如果是第一页需手动置空列表
this.dataList = this.dataList.concat(curPageData); //追加新数据
// 请求成功,隐藏加载状态
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
this.mescroll.endByPage(curPageLen, totalPage);
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
//this.mescroll.endBySize(curPageLen, totalSize);
//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
//this.mescroll.endSuccess(curPageLen, hasNext);
},
fail: () => {
// 请求失败,隐藏加载状态
this.mescroll.endErr()
}
})
},
напиши в конце
оuniapp-douban-movieЭтот проект представляет собой мультитерминальное решение, основанное на экологии Vue, которую автор продолжает обновлять и поддерживать.uniappперсональный учебный проект, некоторые потребности, возникающие при фактическом развитии, будут решены в этом небольшом проекте
Есть несколько особенностей
- Время обновления неизвестно
- Код будет синхронизирован с github.
- подражать как можно больше
豆瓣电影的UI
модуль
| название эффекта | разное |
|---|---|
| В проекте страница списка подтягивается, чтобы загрузить больше, и тянется вниз, чтобы обновить эффект. |
Если это весело, дайте ему星星 код синхронизации здесь
Although it is over, thank you