Table des matières
1. Déroulez une page pour actualiser
1. Situation générale
Modifier "enablePullDownRefresh" de pages.json : true,
{
"pages": [
{
"path": "pages/tabBar/dashboard/index",
"style": {
"navigationBarTitleText": "项目管理",
"enablePullDownRefresh": true,
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#374449"
}
},
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "管理平台",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
}Sur la page (la fonction de traitement onPullDownRefresh est au même niveau que onLoad et d'autres fonctions de cycle de vie)
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();//停止刷新
},
}Deux, locaux
J'utilise le plugin https://ext.dcloud.net.cn/plugin?id=343
Documentation du plugin https://www.mescroll.com/uni.html
J'ai téléchargé ce plug-in et le boîtier correspondant, puis je l'ai mis directement dans l'éditeur et je l'ai ouvert Lien : https://pan.baidu.com/s/1q6IB-mCdCQqcvKaZmzJtcg Code d'extraction : e66j
Mon exigence est que le contenu supérieur soit fixe et que la liste soit déroulée pour être actualisée (pas de numéro de page et les données sont affichées en même temps)
1. Déroulez une page pour actualiser
utilisation des pages
<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. Plusieurs actualisations déroulantes sur une seule page (la barre de défilement revient en haut lors du changement)
Commutation d'onglets multi-pages, actualisation déroulante (pas de numéro de page, données affichées en même temps), le contenu de chaque page d'onglet est différent
Le plug-in indique que v-if ne peut pas être utilisé, car l'utilisation de v-if ne peut pas changer d'onglet et restaurer la position de la barre de défilement (v-if est créé et détruit, v-show est masqué et affiché).
Mais j'utilise le code de l'exemple officiel pour recharger les données de la liste ou d'autres méthodes ne fonctionneront pas
// 详情返回列表,重新加载列表数据 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写法 }S'il est remplacé par mescroll-body et que v-show est utilisé, la position de la barre de défilement des onglets de commutation sera la même, c'est-à-dire où se trouve la barre de défilement de la page précédente et où se trouve la barre de défilement du la page suivante est. Après une longue recherche, je ne sais pas où est le problème.En fin de compte, je ne peux écrire que la méthode d'utilisation de mescroll-uni+v-if en tant que composant.
Mais vous devez toujours le faire selon le site officiel d'abord, si vous avez un problème comme le mien, alors installez ma méthode pour le faire
Etape 1 : Créer la page où le composant place les onglets (ici je n'écris que le format d'un sous-composant)
pages/mot/composants/all.vue
Remarque : les sous-composants utilisant onShow et onLoad ne sont pas valides et doivent être écrits dans created
<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 est cohérent avec le composant précédent, mais le composant de données est incohérent, et il existe une méthode supplémentaire pour obtenir la liste à utiliser par le composant parent
<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>Étape 3 : Utilisez pages/word/components/index.vue dans la page
<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. Plusieurs rafraîchissements déroulants sur une seule page (restaure la position de la barre de défilement lors de la commutation)
Si le contenu correspondant aux onglets est encapsulé dans leurs propres composants, utilisez mescroll-uni lors de l'encapsulation des sous-composants, et utilisez v-show pour changer d'onglet lorsque les données de la liste ont plusieurs pages, restaurer la position de la barre de défilement est inexacte et déclencher le problème de pull-up. Mais si je le mets dans un composant, il n'y aura pas ce problème
Étape 1 : pages de composants/mot/composants/all.vue
Les composants Tree et DownTree utilisent des emplacements personnalisés uni-list.Je ne sais pas pourquoi j'utilise uni-list-item pour déclencher un pull-up, puis cela ne se produira pas, mais cela ne se déclenchera pas si je ne le fais pas ' pas l'utiliser.
<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>Étape 2 : La page utilise pages/word/components/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>