[uniapp] Baja la página para actualizar

Language 2023-07-12 09:43:03 views: null

Tabla de contenido

1. Situación general

dos locales

1. Baja una página para actualizar

2. Múltiples actualizaciones desplegables en una página (la barra de desplazamiento vuelve a la parte superior al cambiar)

3. Múltiples actualizaciones desplegables en una página (restaurar la posición de la barra de desplazamiento al cambiar)

1. Situación general

Modifique "enablePullDownRefresh" de pages.json: verdadero,

{
    "pages": [ 
        {
            "path": "pages/tabBar/dashboard/index",
            "style": {
                "navigationBarTitleText": "项目管理",
                "enablePullDownRefresh": true,
                "navigationBarTextStyle": "white",
                "navigationBarBackgroundColor": "#374449"
            }
        },
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "管理平台",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
}

En la página (la función de procesamiento onPullDownRefresh está al mismo nivel que onLoad y otras funciones del ciclo de vida)

export default {
    data() {
            return {
                productList: [], //列表
                query: {
                    keyword: '', //搜索框
                    pagesize: 10,
                    page: 1,
                },
                total: 0, //总条数
                showTotal: true, //是否显示“下拉加载更多~”
            }
        },
        // 下拉刷新
        onPullDownRefresh() {
            var allTotal = this.query.page * this.query.pagesize
            //this.page为加载次数，this.pageSize为每一次加载的数据条数
            if (allTotal < this.total) {
                //this.total为请求数据的总条数。只要现有条数小于总条数就执行一下代码
                this.showTotal = true;
                this.query.page++;
                //加载次数递加
                this.getlist() //请求更多数据列表
            } else {
                this.showTotal = false;
            }
            uni.stopPullDownRefresh();//停止刷新
        },
}

dos locales

Estoy usando el complemento https://ext.dcloud.net.cn/plugin?id=343

Documentación del complemento https://www.mescroll.com/uni.html 

Descargué este complemento y el caso correspondiente, y luego lo puse directamente en el editor y lo abrí  Enlace: https://pan.baidu.com/s/1q6IB-mCdCQqcvKaZmzJtcg Código de extracción: e66j

Mi requisito es que el contenido principal sea fijo y que la lista se despliegue para actualizar (sin número de página y los datos se muestran a la vez) 

1. Baja una página para actualizar

uso de la página

<template>
	<view class="details-container">
		<view class="example-body">
			<view v-for="(item,index) in tags" :key="index"
				:class="whichSelected===index?'stateBtnSelected':'stateBtnNoselect'" :circle="true"
				@click="selectState(index)">{
   
   {item}}</view>
		</view>

		<view class="center" v-show="tabs===0">
            <!-- 第一步：参数一个都不能少，三个事件是固定的 -->
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<Tree :list="list" :local='local'></Tree>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import Tree from '../../components/Tree/index.vue'
    //第二步：引入
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],//第二步：引入
		name: 'Details',
		components: {
			Tree,
		},
		data() {
			return {
				tags: [],
				whichSelected: 0, //标签
				tabs: 0, //标签对应页面
				list: [], //列表
				content: {}, //上一页数据
				local: '',

                //第三步：数据
				//downOption和upOption的参数配置在mescroll-uni.js中查看
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
                   use: false, // 是否启用上拉加载; 默认true
                   auto: false
                }
			};
		},
		onLoad(e) {
			let that = this
			this.local = uni.getLocale()
			this.content = JSON.parse(e.item)
			if (this.local === 'zh-Hans') {
				uni.setNavigationBarTitle({
					title: that.content.Name,
				})
			} else {
				uni.setNavigationBarTitle({
					title: that.content.Name_EN,
				})
			}
			this.GetFileListById()
			this.tags.push(this.$t('word.whole'))
		},
		methods: {
             //第三步：事件
			/*下拉刷新的回调 */
			downCallback() {
                let that = this
				this.api.GetFileListById({ //调用接口
					datagramsid: that.content.Id
				}).then(res => {
					that.list = res.data.Data
                    this.$nextTick(() => {
					   this.mescroll.endSuccess(this.list.length)
				    })
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
		
			},
            /*上拉 */
			upCallback() {
				 let that = this
				this.api.GetFileListById({ //调用接口
					datagramsid: that.content.Id
				}).then(res => {
					that.list = res.data.Data
                   let curPageLen = this.list.length;
				   // 接口返回的是否有下一页 (true/false)
				   let hasNext = false;
				   setTimeout(() => {
					 this.mescroll.endSuccess(curPageLen, hasNext)
				   }, 20)
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			GetFileListById() {
				let that = this
				this.api.GetFileListById({
					datagramsid: that.content.Id
				}).then(res => {
					that.list = res.data.Data
				})
			},
		}
	}
</script>

2. Múltiples actualizaciones desplegables en una página (la barra de desplazamiento vuelve a la parte superior al cambiar)

Cambio de pestañas de varias páginas, actualización desplegable (sin número de página, los datos se muestran a la vez), el contenido de cada pestaña es diferente

El complemento dice que v-if no se puede usar, porque al usar v-if no se puede cambiar de pestaña y restaurar la posición de la barra de desplazamiento (v-if se crea y se destruye, v-show se oculta y se muestra).

Pero uso el código del ejemplo oficial para recargar los datos de la lista u otros métodos no funcionarán

// 详情返回列表,重新加载列表数据
	onShow() {
		this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
		this.canReset && this.mescroll.scrollTo(0,0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
		this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
		
		// 注意: 子组件没有 onShow 的生命周期, 所以
		// 对于 mescroll-more.vue 和 mescroll-swiper.vue 的返回刷新, 需更新 1.3.3 版本, 且参考对应示例的onShow写法
	}

Si se cambia a mescroll-body y se usa v-show, la posición de la barra de desplazamiento de las pestañas de cambio será la misma, es decir, donde está la barra de desplazamiento de la página anterior y donde está la barra de desplazamiento de la página anterior. la página siguiente es. Despues de mucho buscar no se donde esta el problema, al final solo puedo escribir el metodo de usar mescroll-uni+v-if como componente.

Pero aún debe hacerlo de acuerdo con el sitio web oficial primero, si tiene un problema como el mío, instale mi método para hacerlo 

Paso 1: Cree la página donde el componente coloca las pestañas (aquí solo escribo el formato de un subcomponente)

páginas/palabra/componentes/todos.vue

Nota: los subcomponentes que usan onShow y onLoad no son válidos y deben escribirse en creado 

<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-if="i === index">
		<mescroll-uni ref="mescrollRef0" top="92" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<!-- 数据列表 -->
			<Tree :list="list" :local='local'></Tree>
		</mescroll-uni>
	</view>
</template>

<script>
	import Tree from '@/components/Tree/index.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";

	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			Tree,
		},
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0
				}
			},
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				list: [], //下载列表
				local: '',

				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
                   use: false, // 是否启用上拉加载; 默认true
                   auto: false
                }
			}
		},
		created() {
			this.local = uni.getLocale()
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let pageNum = page.num
				this.api.GetFileTreeJson().then(res => {
					// console.log(res.data.Data)
					this.list = res.data.Data
					this.mescroll.endByPage(this.list.length, 1);
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data.Data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}
	}
</script>

pages/word/components/downitem.vue es consistente con el componente anterior, pero el componente de datos es inconsistente, y hay un método adicional para obtener la lista para que la use el componente principal

<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-if="i === index">
		<mescroll-uni ref="mescrollRef1" @init="mescrollInit" top="92" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<DownTree :records="records" :local='local'></DownTree>
		</mescroll-uni>
	</view>
</template>

<script>
	import DownTree from '@/components/DownTree/index.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		components: {
			DownTree
		},
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0
				}
			},
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				records: [], //下载列表
				local: '',

				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
                   use: false, // 是否启用上拉加载; 默认true
                   auto: false
                }
			}
		},
		created() {
			this.local = uni.getLocale()
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let pageNum = page.num
				this.api.GetWxUserDownloadList().then(res => {
					this.records = res.data.Data
					this.mescroll.endByPage(this.records.length, 1);
					//设置列表数据
					if (page.num == 1) this.records = []; //如果是第一页需手动制空列表
					this.records = this.records.concat(res.data.Data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			getrecords() {
				this.api.GetWxUserDownloadList().then(res => {
					this.records = res.data.Data
					this.mescroll.endByPage(this.records.length, 1);
					//设置列表数据
					if (page.num == 1) this.records = []; //如果是第一页需手动制空列表
					this.records = this.records.concat(res.data.Data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}
	}
</script>

Paso 3: Use pages/word/components/index.vue en la página

<template>
	<view class="word-container">
		<view class="example-body">
			<view v-for="(item,index) in tags" :key="index"
				:class="tabIndex===index?'stateBtnSelected':'stateBtnNoselect'" :circle="true"
				@click="tabChange(index)" @input="changeload" v-model="tabIndex">{
   
   {item}}</view>
		</view>
		<!-- 全部 -->
		<mescroll-all ref="mescrollItem0" :i="0" :index="tabIndex" :tabs="tags">
		</mescroll-all>
		<!-- 下载记录 -->
		<MescrollDown ref="mescrollItem1" :i="1" :index="tabIndex" :tabs="tags">
		</MescrollDown>
	</view>
</template>

<script>
	import MescrollAll from "./components/all.vue";
	import MescrollDown from "./components/downitem.vue";

	import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";
	export default {
		mixins: [MescrollMoreMixin],
		name: 'Word',
		components: {
			MescrollDown,
			MescrollAll,
		},
		data() {
			return {
				tags: [],
				local: '',

				tabIndex: 0,//标签对应页面
			};
		},
		onLoad() {
			this.tags.push(this.$t('word.whole'), this.$t('word.download'))
			uni.setNavigationBarTitle({
				title: this.$t('pages.word'),
			})
		},
		onShow() {
			this.tabIndex = this.$store.state.tabs
			this.local = uni.getLocale()
			if (this.whichSelected === 1) {
				const Token = uni.getStorageSync('GetPhone_Token')
				if (Token) {
                    //点击下载列表tab的时候要判断有没有token，没有就要跳转到登录页，我登录成功后返回到这一页
                    //若是我不调用子组件的方法也就是获取列表数据，会出现一直显示加载中，所以我这里调用了方法，下面的标签切换同理
					this.$refs.mescrollItem1.getrecords()
				} else {
					uni.navigateTo({
						url: '/pages/login/index'
					});
				}
			} 
		},
		methods: {
			// 标签切换
			tabChange(index) {
				this.whichSelected = index
				this.tabIndex = index
				this.$store.commit('SET_TABS', index)
				if (this.tabIndex === 1) {
					const Token = uni.getStorageSync('GetPhone_Token')
					if (Token) {
						this.$refs.mescrollItem1.getrecords()
					} else {
						uni.navigateTo({
							url: '/pages/login/index'
						});
					}
				} 
			},
		}
	}
</script>

<style lang="scss">
	.vue-ref {
		padding: 0 !important;
	}
	.word {
		&container {
			position: relative;
		}
	}
	.left {
		display: flex;
		margin: 10px;
	}
	.example-body {
		display: flex;
		padding: 10px 20px;
		background-color: #fff;
		width: 100%;
		position: fixed;
		z-index: 2;
	}
	.center {
		position: absolute;
		top: 45px;
		width: 100%;
		// height: 100%;
		border-top: 1px solid #e5e5e5;
	}
	.stateBtnSelected {
		background-color: #bbe5ff;
		color: #1480cd !important;
		border-radius: 20px;
		font-size: 14px;
		height: 25px;
		line-height: 25px;
		// width: 60px;
		margin: 0 5px;
		padding: 0 15px;
		text-align: center;
	}
	.stateBtnNoselect {
		background-color: transparent;
		color: #8f939c !important;
		border: none !important;
		font-size: 14px;
		height: 25px;
		line-height: 25px;
		// width: 60px;
		margin: 0 5px;
		padding: 0 15px;
		text-align: center;
	}
	.slot-image {
		width: 30px;
		height: 30px;
	}
	.slot-box {
		margin-right: 10px;
	}
	.uni-list-item__container {
		align-items: center !important;
		line-height: 20px;
	}
</style>

3. Múltiples actualizaciones desplegables en una página (restaurar la posición de la barra de desplazamiento al cambiar)

Si el contenido correspondiente a las pestañas está encapsulado en sus propios componentes, use mescroll-uni cuando encapsule los subcomponentes y use v-show para cambiar de pestaña cuando los datos de la lista tengan varias páginas, restaurar la posición de la barra de desplazamiento es inexacta y desencadenar el problema de pull-up. Pero si lo pongo en un componente, no habrá tal problema.

 Paso 1: páginas de componentes/palabra/componentes/todos.vue

Los componentes Tree y DownTree usan ranuras personalizadas uni-list. No sé por qué uso uni-list-item para activar un pull-up, y luego no sucederá, pero no se activará si lo hago. No lo use.

<template>
	<view class="word-container">
		<!-- 使用这个切换tabs的时候，会触发上拉一次，之后就不会再触发了 -->
		<!-- <uni-list>
			<uni-list-item v-for="(item,index) in records" :key='index'
				:title="local==='zh-Hans'?item.filename:item.filename_EN" thumb-size="lg"
				:rightText="item.DownloadTime">
				<template v-slot:header>
					<view class="slot-box">
						<image v-if="item.fileExt==='.mp4'" class="slot-image" src="/static/shipin_lvhangyingxiang.png"
							mode="widthFix">
						</image>
						<image v-else-if="item.fileExt==='.pdf'" class="slot-image" src="/static/pdfwenjian.png"
							mode="widthFix">
						</image>
						<image v-else class="slot-image" src="/static/a-wenjianjiawenjian.png" mode="widthFix">
						</image>
					</view>
				</template>
			</uni-list-item>
		</uni-list> -->
		<uni-list v-for="(item,j) in records" :key='j'>
			<view :border="none" :padding="0" :spacing="0" style="padding:0" :is-shadow="false" :isFull="true">
				<view class="card-title" style="display: flex;justify-content: space-between;">
					<view>
						<image v-if="item.fileExt==='.mp4'" class="slot-image" src="/static/shipin_lvhangyingxiang.png"
							mode="widthFix">
						</image>
						<image v-else-if="item.fileExt==='.pdf'" class="slot-image" src="/static/pdfwenjian.png"
							mode="widthFix">
						</image>
						<image v-else class="slot-image" src="/static/a-wenjianjiawenjian.png" mode="widthFix">
						</image>
					</view>
					<view class="title-box"
						style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
						<view class="">{
    
    {local==='zh-Hans'?item.filename:item.filename_EN}}
						</view>
						<view class="">{
    
    {item.DownloadTime}}</view>
					</view>
				</view>
			</view>
		</uni-list>
	</view>
</template>
<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<mescroll-uni :ref="'mescrollRef'+i" top="92" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<!-- 数据列表 -->
            <!-- tab为0的时候 -->
			<Tree v-if="index===0" :list="list" :local='local'></Tree>
            <!-- tab为1的时候 -->
			<DownTree v-else :records="records" :local='local'></DownTree>
		</mescroll-uni>
	</view>
</template>

<script>
	import DownTree from '@/components/DownTree/index.vue'
	import Tree from '@/components/Tree/index.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";

	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			Tree,
			DownTree
		},
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0
				}
			},
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				list: [], //下载列表
				local: '',
				records: [], //下载列表

				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
                   use: false, // 是否启用上拉加载; 默认true
                   auto: false
                }
			}
		},
		created() {
			this.local = uni.getLocale()
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				if (this.index === 0) {
					let pageNum = page.num
					this.api.GetFileTreeJson().then(res => {
						// console.log(res.data.Data)
						this.list = res.data.Data
						this.mescroll.endByPage(this.list.length, 1);
						//设置列表数据
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.data.Data); //追加新数据
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				} else {
					this.api.GetWxUserDownloadList().then(res => {
						// console.log(res.data.Data)
						this.records = res.data.Data
						this.mescroll.endByPage(this.records.length, 1);
						//设置列表数据
						if (page.num == 1) this.records = []; //如果是第一页需手动制空列表
						this.records = this.records.concat(res.data.Data); //追加新数据
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				}

			},
			// 文件列表
			GetFileTreeJson() {
				this.api.GetFileTreeJson().then(res => {
					// console.log(res.data.Data)
					this.list = res.data.Data
					this.mescroll.endByPage(this.list.length, 1);
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data.Data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			getrecords() {
				this.api.GetWxUserDownloadList().then(res => {
					// console.log(res.data.Data)
					this.records = res.data.Data
					this.mescroll.endByPage(this.records.length, 1);
					//设置列表数据
					if (page.num == 1) this.records = []; //如果是第一页需手动制空列表
					this.records = this.records.concat(res.data.Data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}
	}
</script>

Paso 2: la página usa páginas/palabra/componentes/index.vue

<template>
	<view class="word-container">
		<view class="example-body">
			<view v-for="(item,index) in tags" :key="index"
				:class="tabIndex===index?'stateBtnSelected':'stateBtnNoselect'" :circle="true"
				@click="tabChange(index)" @input="changeload" v-model="tabIndex">{
   
   {item}}</view>
		</view>

		<mescrollItem0 ref="mescrollItem0" :i="0" :index="tabIndex" :tabs="tags">
		</mescrollItem0>
		<mescrollItem0 ref="mescrollItem1" :i="1" :index="tabIndex" :tabs="tags">
		</mescrollItem0>
	</view>
</template>

<script>
	import mescrollItem0 from "./components/all.vue";
	import mescrollItem1 from "./components/downitem.vue";

	// import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";
	export default {
		mixins: [MescrollMixin],
		name: 'Word',
		components: {
			mescrollItem0,
			mescrollItem1,
		},
		data() {
			return {
				tags: [],
				list: [],
				records: [], //下载列表
				local: '',

				tabIndex: 0,//标签对应页面
			};
		},
		onLoad() {
			this.tags.push(this.$t('word.whole'), this.$t('word.download'))
			uni.setNavigationBarTitle({
				title: this.$t('pages.word'),
			})
		},
		onShow() {
			this.whichSelected = this.$store.state.tabs
			this.tabIndex = this.$store.state.tabs
			this.local = uni.getLocale()
			if (this.whichSelected === 1) {
				const Token = uni.getStorageSync('GetPhone_Token')
				if (Token) {
					this.$refs.mescrollItem1.getrecords()
				} else {
					uni.navigateTo({
						url: '/pages/login/index'
					});
				}
			} 
		},
		methods: {
			// 标签切换
			tabChange(index) {
				this.whichSelected = index
				this.tabIndex = index
				this.$store.commit('SET_TABS', index)
				if (this.tabIndex === 1) {
					const Token = uni.getStorageSync('GetPhone_Token')
					if (Token) {
						this.$refs.mescrollItem1.getrecords()
					} else {
						uni.navigateTo({
							url: '/pages/login/index'
						});
					}
				} 
			},
		}
	}
</script>
<style lang="scss">
	.vue-ref {
		padding: 0 !important;
	}
	.word {
		&container {
			position: relative;
		}
	}
	.left {
		display: flex;
		margin: 10px;
	}
	.example-body {
		display: flex;
		padding: 10px 20px;
		background-color: #fff;
		width: 100%;
		position: fixed;
		z-index: 2;
	}
	.center {
		position: absolute;
		top: 45px;
		width: 100%;
		// height: 100%;
		border-top: 1px solid #e5e5e5;
	}
	.stateBtnSelected {
		background-color: #bbe5ff;
		color: #1480cd !important;
		border-radius: 20px;
		font-size: 14px;
		height: 25px;
		line-height: 25px;
		// width: 60px;
		margin: 0 5px;
		padding: 0 15px;
		text-align: center;
	}
	.stateBtnNoselect {
		background-color: transparent;
		color: #8f939c !important;
		border: none !important;
		font-size: 14px;
		height: 25px;
		line-height: 25px;
		// width: 60px;
		margin: 0 5px;
		padding: 0 15px;
		text-align: center;
	}
	.slot-image {
		width: 30px;
		height: 30px;
	}
	.slot-box {
		margin-right: 10px;
	}
	.uni-list-item__container {
		align-items: center !important;
		line-height: 20px;
	}
</style>

Supongo que te gusta

Origin blog.csdn.net/Qxn530/article/details/127450118
Recomendado
Clasificación
Diario
Más
2024-05-19(0)
2024-05-18(30)
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)

Code World

© 2018 codetd.com