获取接口返回的一篇文章如何在轮播图中显示，并且完美适配分页（英文不截断单词）

//获取文字内容
			getTextUrls(bookId) {
				getTextUrl(`/${bookId}/${bookId}.jsontxt`).then(res => {
					if (res.statusCode === 200) {
						//需求需要5页显示，所以截取一3000字节足够显示的
						this.contentText = res.data.join(',').slice(0,3000)
						//先给第一页赋1000字用于显示
						this.text[0] = this.contentText.slice(0,1000)
					}
				})
			},

1.点击下一页获取下一页要显示的内容

//下一页
			nextSwiper() {
				let current = this.swiperCurrent;
				console.log("swiper", current)
				if (current === 6) return
				let ncurrent = current + 1;
				this.swiperCurrent = ncurrent
			    //因为我的轮播第一张是图片，所以文章是从第二个开始的
				if(ncurrent >=2 && current < 5){
					//点击下一页的时候获取当前页面显示到了文章的哪一个字符，获取最后一个字符的索引
					let element = document.querySelector(`.p${current}`)
					let index = getCharIndex(element)
					//因为文章就一篇所以定义变量累计每一页的最后一个字符索引
					this.textIndex += index + 1
					//引文点击上一页时要减去当前页的文字个数，所以存个数组
					this.indexList.push(index+1)
					//下一页显示的文章是当前页最后一个字的索引加1000个
					this.text[current] = this.contentText.slice(this.textIndex,this.textIndex + 1000)
				}
				
			},

2.getCharIndex 方法是封装获取每页最后一个字符的索引

export const getCharIndex = (element) => {
	const text = element.textContent;
	const span = document.createElement('span');
	span.style.cssText = getComputedStyle(element).cssText;
	span.style.width = element.offsetWidth + 'px';
	span.textContent = text;
	element.textContent = '';
	element.appendChild(span);

	let startPos = 0;
	let endPos = text.length;
	let rect = element.getBoundingClientRect();
	let spanRect = span.getBoundingClientRect();

	while (startPos < endPos) {
		let midPos = Math.floor((startPos + endPos) / 2);
		span.textContent = text.substring(0, midPos + 1);
		spanRect = span.getBoundingClientRect();
		if (spanRect.bottom <= rect.bottom && spanRect.right <= rect.right) {
			startPos = midPos + 1;
		} else {
			endPos = midPos;
		}
	}

	element.textContent = text;
	//处理英文文章，截取的时候不截断单词
	let pattern = /[a-zA-Z]/;
	if (pattern.test(text) && text[startPos - 1] != " ") {
		let str = text.slice(0, startPos - 1)
		let index = str.lastIndexOf(' ')
		console.log(index)
		startPos = index
	}
	return startPos - 1;
}

3.不要忘记点击上一页时要减去存储的索引

	//上一页
			prevSwiper() {
				let current = this.swiperCurrent;
				if (current === 0) return
				let ncurrent = current - 1;
				this.swiperCurrent = ncurrent
				if(current > 1) {
					this.textIndex = this.textIndex - this.indexList[this.indexList.length-1]
					this.indexList.pop()
					console.log(this.textIndex,this.indexList)
				}else {
					this.textIndex = 0
				}
				
			},

4.我是在uniapp中实现的，结构代码如下

<swiper-item v-for="item in 5">
					<view class="swiper-item p_item">
						<p class="p" :class="`p${item}`">
							{{text[item-1]}}
						<!-- <p v-for="item in text.slice(0,17)">{{ item }}</p> -->
						</p>
					</view>
				</swiper-item>

注：本以为到此已经完美解决了，没想到打包app后芭比Q了，所以写了下面一篇文章

uniapp实现文章在轮播图中翻页