自定义小程序Loading效果(vue.js移动端可用---需修改)

最新推荐文章于 2025-03-26 14:12:14 发布

原创

最新推荐文章于 2025-03-26 14:12:14 发布 · 818 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue.js移动端小程序中自定义加载更多效果，通过load-more组件展示三种不同的loading状态，并提供了在父页面goods-list中引入并使用load-more组件的详细步骤，包括组件的wxml、wxss、js文件以及goods-list的相关配置。

// load-more组件 (三种loading效果)

load-more.wxml

<view class="tui-loadmore-class tui-loadmore" wx:if="{
  
  {visible}}">
  <view class="{
  
  {'tui-loading-'+index}} {
  
  {(index==3 && type)?'tui-loading-'+type:''}}"></view>
  <view class="tui-loadmore-tips">{
  
  {text}}</view>
</view>

load-more.wxss

.tui-loadmore {
  width: 48%;
  margin: 1.5em auto;
  line-height: 1.5em;
  font-size: 24rpx;
  text-align: center;
}

.tui-loading-1 {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: a 1s steps(12) infinite;
  animation: a 1s steps(12) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsb