精华内容
下载资源
问答
  • 微信小程序加载动画

    千次阅读 2020-06-10 20:10:04
    补充一下这篇文章 里的第二个例子的代码。 ...--第一个动画,省略,见原文章--> </view> <view class="tui-loading-cell"> <view class="circle-line-spin" > <tex...

    补充一下这篇  文章  里的第二个例子的代码。

    wxml 文件:

    <view class="tui-loading-row">
      <view class="tui-loading-cell">
        <!--第一个动画,省略,见原文章-->
      </view>
      <view class="tui-loading-cell">
        <view class="circle-line-spin" >
          <text></text>
          <text></text>
          <text></text>
          <text></text>
          <text></text>
          <text></text>
          <text></text>
          <text></text>
        </view>
      </view>
    </view>

    wxss 文件:

    .tui-loading-row{
      width: 100%;
      display: table;
      table-layout: fixed;
    }
    .tui-loading-cell{
    width: 100%;
    display: table-cell;
    text-align: center;
    }
    
    /*动画二:整体旋转  */
    .circle-line-spin{
      width: 100px;
      height: 100px;
      display: inline-block;
      position: relative;
      animation: circle-line 1.9s linear infinite;  
    }
    .circle-line-spin text{
      display: block;
      width: 50%;
      height: 5px;
      opacity: .7;
      position: absolute;
      top: calc(50% - 2.5px);
      left: 0px;
      transform-origin: center right; 
    }
    
    .circle-line-spin text::before{
      content: '';
      display: block;
      width: 15px;
      height: 5px;
      position: absolute;
      top: 0;
      right: 10px;
      background-color: rgb(253, 186, 130);
    }
    
    .circle-line-spin text:nth-child(1){
      transform: rotate(0deg);
    }
    .circle-line-spin text:nth-child(2){
      transform: rotate(45deg);
    }
    .circle-line-spin text:nth-child(3){
      transform: rotate(90deg);
    }
    .circle-line-spin text:nth-child(4){
      transform: rotate(135deg);
    }
    .circle-line-spin text:nth-child(5){
      transform: rotate(180deg);
    }
    .circle-line-spin text:nth-child(6){
      transform: rotate(225deg);
    }
    .circle-line-spin text:nth-child(7){
      transform: rotate(270deg);
    }
    .circle-line-spin text:nth-child(8){
      transform: rotate(315deg);
    }
    
    @keyframes circle-line {
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }
    

    效果图见原文章。

    展开全文
  • 基于wepy开发的微信小程序loading加载动画组件
  • 本文实例讲述了微信小程序loading组件显示载入动画用法。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 ① index.wxml 加载中... <button type=default bindtap=loadingTap>点击弹出loading...
  • 主要介绍了微信小程序 连续旋转动画(this.animation.rotate)详解的相关资料,需要的朋友可以参考下
  • 这个压缩包里面包含three.js在微信小程序加载3D动画fbx模型的代码。 得到了fbx模型的http链接,使其加载在小程序端,都是适配小程序版本的代码 其中three_new.js是小程序版的3D加载库文件 FBXLoader_new是小...
  • 微信小程序 加载动画效果

    千次阅读 2018-09-06 21:46:24
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图: 代码: <view class="line"> <image src="../../img/line.png"></image> </view> .line { ...

    微信小程序开发交流qq群   173683895

       承接微信小程序开发。扫码加微信。

    效果图:

    代码:

    <view class="line">
    
    <image src="../../img/line.png"></image>
    
    </view>
    
    
    .line {
        height:1px;
        position:absolute;
        animation: loadingLine 2s linear infinite;
    
    }
    

       

    图片↑

     

    展开全文
  • 记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果。本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 主要为大家详细介绍了微信小程序实现动态列表项的顺序加载动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • WechatLoading 网上四处收集来的微信小程序加载框布局,不断更新中。。。 先看几张截图吧,暂时效果不多,以后日积月累会多的不得了。 第二波: 第一波:
  • 在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多。         通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在...

    前言

    在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多。

    通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代码,通过使用wx:if来控制该动画的显示。

    这样做在一定程度上也是可以实现需求,但是如果每个需要过度动画的页面都复写一遍该动画view代码,那么就会显得有点冗余。

    下面分享一个自定义加载动画ଘ(੭ˊᵕˋ)੭

    需求分析

    小程序原生加载动画开放的权限

    • 自定义title:加载时显示的文字
    • 提供动画类型的选择:比如加载、完成、失败等,类型较少
    • mask:是否启用蒙层,防止触摸穿透

    已实现效果

    • title
      • 支持自定义文字内容
      • 支持多行、单行显示
      • 中文、英文均不溢出(可修改)
      • 溢出多余部分已省略号显示(可修改)
      • 文字颜色、大小可以修改
    • 动画样式
      • 支持自定义动画样式
    • mask
      • 模式1:启用蒙层,模糊全局页面,禁止用户操作
      • 模式2:启用蒙层,页面显示与正常一致,禁止用户操作
      • 模式3:不启用蒙层,允许用户操作
    • 动画深色加载框
      • 支持选择启用与不启用

    效果展示

    演示-1

    演示-2

    演示-3

    用法

    步骤1

    在需要使用加载动画的界面

    引入loading组件


    假设我们需要在index页面中使用

    首先找到index.json

    在usingComponents添加

    “loading”:"…/…/components/loading/loading"

    …/…/components/loading/loading表示的意思是:loading组件的文件位置

    示例:

    {
      "usingComponents": {
        "loading":"../../components/loading/loading"
      },
    }
    

    步骤2

    在index.wxml页面中添加

    <loading  title="疯狂敲代码中.." maskFlag='Haihong' loadingFlag='{{loadingFlag}}'/>
    

    步骤3

    在index.js中添加变量loadingFlag

    初始值为空

    data{
      loadingFlag:'',
    }
    

    步骤4

    需要显示加载动画时

    在js对应函数中使用下面代码

    k.setData({
      loadingFlag:true
    })
    

    取消加载动画

    k.setData({
      loadingFlag:false
    })
    

    参数说明与自定义样式

    对于一个需要使用自定义加载动画的页面

    一般步骤就是

    1. 在json中引入组件
    2. js中添加变量loadingFlag
    3. 在wxml页面中添加组件代码
    4. 在js中对loadingFlag进行设置,true或false,用于决定动画的开始与结束

    wxml使用的组件代码

    <loading  title="疯狂敲代码中.." maskFlag='Haihong' loadingFlag='{{loadingFlag}}'/>
    

    参数解释

    title:加载动画下方显示的文字

    举例:title=“加载中”

    <loading  title="加载中" maskFlag='Haihong' loadingFlag='{{loadingFlag}}'/>
    

    效果图如下

    maskFlag:蒙层

    有三种参数选择

    1. Haihong:启用蒙层,模糊全局页面,禁止用户操作
    2. HaihongPro:启用蒙层,页面显示与正常一致,禁止用户操作
    3. 空或除Haihong、HaihongPro之外的其他字符:不启用蒙层,允许用户操作

    举例:

    情况1:maskFlag=‘Haihong’

    <loading  title="加载中" maskFlag='Haihong' loadingFlag='{{loadingFlag}}'/>
    

    效果图如下

    此时产生了蒙层效果,同时周围界面也模糊了,用户操作被禁止了,只有等待动画结束才可以进行操作


    情况2:maskFlag=‘HaihongPro’

    <loading  title="加载中" maskFlag='HaihongPro' loadingFlag='{{loadingFlag}}'/>
    

    效果图如下

    此时产生了蒙层效果,只是视觉上观察页面没有模糊,用户操作同样被禁止了,只有等待动画结束才可以进行操作


    情况3:maskFlag=’’

    <loading  title="加载中" maskFlag='' loadingFlag='{{loadingFlag}}'/>
    

    效果图如下

    没有蒙层效果,动画运行时,用户依然可以点击、滑动屏幕

    loading组件代码见

    在这里插入图片描述

    展开全文
  • 主要介绍了微信小程序按钮点击动画效果的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画?导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下。网上找了很久这种效果,帖子很少,都没看到...

    微信小程序列表加载动画示例

    初学微信小程序开发,记录一下。网上找了很久这种效果,帖子很少,都没看到想要的,自力更生,翻翻官方文档自己写。
    效果:
    在这里插入图片描述

    实现思路

    什么是动画?

    	接触一项技术前,阅读官方文档是必不可少的,明白了原理才能进行开发,微信开发文档上面有详细介绍    https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html
    

    导航栏设置

    页面的导航栏,这里推荐学习尚硅谷提供的微信小程序入门教程,针对一个高仿网抑云音乐项目来进行讲解,对萌新来说很有帮助,上面的老师讲得挺详细的,跟着去做的时候,千万别看一点做一点,最好做到统筹全局,把一个章节看完再去动手,反复看几遍,能避免踩坑。
    https://www.bilibili.com/video/BV12K411A7A2?p=44
    上面视频链接做了详细的导航栏切换效果的实现。
    

    列表动画加载

    首先要明确的是,需要加载的列表数据需要滚动,这样的话,需要用一个scroll-view来进行包裹,相信静态数据显示大家都不会有问题,so easy,使用wx:for来进行列表数据加载。
    当静态数据搭建好后,看起来总是怪怪的,静止的画面总感觉缺了什么,不够高大上?
    重头戏开始,首先,附上wxml代码。
    
    <scroll-view scroll-x class="navScroll" enable-flex scroll-into-view="{{'scroll'+navId}}" scroll-with-animation>
      <view id="{{'scroll'+item.id}}" class="navItem" wx:for="{{navList}}" wx:key="id">
        <view class="navContent {{navId===item.id?'active':''}}" bindtap="changeNav" data-id="{{item.id}}">
          {{item.name}}
        </view>
      </view>
    </scroll-view>
    
    <view class="hr"></view>
    
    <scroll-view scroll-y class="srollDataCard" bindrefresherrefresh="handleAnnounceRefresh"
      refresher-enabled="{{isRefresher}}" refresher-triggered="{{isTriggered}}" bindscrolltolower="handleToLower">
      <view wx:if="{{navId == 0}}" wx:for="{{announceList}}" wx:key="pk_bill" wx:for-index="id">
        <view class="announceCard" animation="{{ani[id]}}" style="opacity:{{opacity}};transform:{{transform}};" bindtap="showAnnounceDetail">
          {{item.pk_bill}}
          <!--卡片内容自行设置-->
        </view>
      </view>
    </scroll-view>
    
    <!--模拟弹窗画布-->
    <view class="mask" bindtap="closeAnnounceDetail" wx:if="{{isShowModal}}"></view>
    
    <!--模拟弹窗-->
    <view class="modalDlg" animation="{{annDetailAni}}">
      <view class="annDetailcloseBtnArea">
        <button bindtap="closeAnnounceDetail" size="mini"
          style="width:60rpx;height:60rpx;line-height:60rpx;font-size:30rpx;margin-right:2rpx;display:inline;float:right;">×</button>
      </view>
    </view>
    

    scroll-view参数解析:
    scroll-y:实现y轴滚动
    refresher-enabled、bindrefresherrefresh:实现下拉刷新,bindrefresherrefresh绑定下拉刷新的方 法。refresher-enabled,开启刷新,boolean值。
    refresher-triggered:加载数据完成让下拉刷新的三个点…消失的标记,boolean值。
    bindscrolltolower:绑定了触底加载的方法。
    此处有个小坑,实践证明refresher-enabled不要直接写死把它恒等于true,这样会出现初次进入界面,数据拿到了,界面无法渲染成功的问题,出现一片空白。解决方法:在初次加载界面的时候在data里初始为false,在拿到数据后再设置为true
    其余参数解析:
    navId :导航栏下标,这边用第一个导航栏,即下标为0。
    pk_bill:数据列表的主键。
    id:for循环每次执行的下标,相当于java里for循环一般这么写for(int i=0,i<2;i++) 这个id就相当于这个i
    ani[id]:动画数组。
    showAnnounceDetail:绑定了列表的卡片,弹出拟态窗口的方法。

    JS代码

    const app = getApp();
    let navList = [{
      id: 0,
      name: "页面导航0"
    }, {
      id: 1,
      name: "页面导航1"
    }, {
      id: 2,
      name: "页面导航2"
    }, {
      id: 3,
      name: "页面导航3"
    }, {
      id: 4,
      name: "页面导航4"
    }, {
      id: 5,
      name: "页面导航5"
    }];
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        navList: navList, //导航栏tag选项
        navId: 0, //标识导航栏下标
        isTriggered: true, //标志下拉刷新
        announceList: [], //列表卡片列表
        isShowScroll: false, // 是否出现滚动条
        isRefresher: false, // 这一个条件很重要,如果不这样设置,数据加载会出现问题,会出现需要下拉才加载出数据
        ani: [],
        currentpage: 1,
        pagesize: 6,
        totalcount: 1,
        opacity: 0,
        transform: "",
        annDetailAni: "",
        isShowModal: false, //点击卡片详情 背景画布显示
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log("已进入系统主页");
        // 当前微信用户的权限校验 加载数据区域 默认第一个导航栏页签 公告大厅
        wx.showLoading({
          title: '正在加载',
        })
        // 当前微信用户的权限校验过滤
        this.checkUserAuth();
        // 查询列表卡片
        this.queryList(1);
        // 查询总页数
        this.queryPageCount();
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 当前微信用户的权限校验过滤
       */
      checkUserAuth() {
        // 权限过滤 省略
      },
    
      queryList(currentpage) {
        /**
         * 这里可以被视为发起请求 之后的回调操作
         * currentpage传过来是分页查询参数:当前页
         * 下面是造出来的数据 上拉触底加载即是把数据追加到list尾部
         */
        let announceList = [];
        if (currentpage == 1) {
          announceList = [{
            "pk_bill": "卡片1",
          }, {
            "pk_bill": "卡片2",
          }, {
            "pk_bill": "卡片3",
          }, {
            "pk_bill": "卡片4",
          }, {
            "pk_bill": "卡片5",
          }, {
            "pk_bill": "卡片6",
          }];
        }
        if (currentpage == 2) {
          let nextAnnounceList = [{
            "pk_bill": "卡片7",
          }, {
            "pk_bill": "卡片8",
          }];
          announceList = this.data.announceList.concat(nextAnnounceList);
        }
        // 必须在执行滑动前初始化动画数组
        this.setData({
          announceList: announceList,
          isRefresher: true,
          opacity: 0,
          transform: `translateY(${200*this.data.pagesize}rpx)` // 根据分页的数量 计算初始隐藏(透明)的位置 如果这个位置露出了当前屏幕一点点,那么动画将不会显示效果
        });
        // 设置setTimeout的时间 是因为:一般执行回调 请求会有一个时间,加载动画需要这个时间来反应,如果没有一点点延迟,那么动画加载便失效
        // 这个时间可以很短很短 短到1ms 但就是需要 如果是写在接口回调里 则去掉这个setTimeout
        setTimeout(() => {
          this.slideDown(this.data.announceList);
        }, 1);
        wx.hideLoading({})
        console.log("加载数据完成,当前数据:", JSON.stringify(this.data.announceList));
      },
    
      queryPageCount() {
        // 自行编写查询分页总数代码
        this.setData({
          totalcount: 2
        });
      },
    
      // 公告大厅加载动画
      slideDown(dataList) {
        // 关于微信小程序动画的参数 请查看官方文档
        const that = this;
        let duration = 600;
        for (let a in dataList) {
          let animation = wx.createAnimation({
            duration: duration,
            timingFunction: 'ease',
          });
          that.setAni(that, animation);
          duration = duration + 200;
        }
      },
    
      // 设置动画数组
      setAni(that, animation) {
        let ani = that.data.ani;
        ani.push(animation.translateY(0).opacity(1).step().export());
        that.setData({
          ani: ani
        })
        console.log("设置动画中");
      },
    
      /**
       * 导航点击切换事件
       */
      changeNav(e) {
        // 通过id进行传参会自动转化为String,需要进行*1处理成number  e.currentTarget.id * 1
        // 通过data-id进行传参则不会
        this.setData({
          navId: e.currentTarget.dataset.id,
        });
      },
    
      /**
       * 下拉刷新
       */
      handleAnnounceRefresh() {
        console.log("下拉刷新");
        wx.showLoading({
          title: '正在加载',
        })
        if (this.data.navId == 0) {
          // 重新加载须清空当前页面数据和动画数组
          this.setData({
            announceList: [],
            ani: [],
            currentpage: 1
          })
          // 重新加载第一页数据
          this.queryList(1);
          // 查询公告大厅总页数
          this.queryPageCount();
          // 此处设置setTimeout的目的是不让下拉刷新的三个... 立即消失 避免回弹太快产生错觉
          setTimeout(() => {
            this.setData({
              isTriggered: false
            });
          }, 200);
        }
        wx.hideLoading({})
      },
    
      /**
       * 上拉触底加载
       */
      handleToLower() {
        if (this.data.currentpage + 1 <= this.data.totalcount) {
          let currentpage = this.data.currentpage + 1;
          console.log("当前页:", currentpage);
          this.setData({
            currentpage: currentpage,
          })
          if (this.data.navId == 0) {
            // 加载数据区域 页面导航0
            wx.showLoading({
              title: '正在加载',
            })
            this.queryList(currentpage);
            setTimeout(() => {
              wx.hideLoading({})
            }, 200);
          }
        } else {
          wx.showToast({
            title: "已经到底啦!",
            icon: "none",
            duration: 1000
          })
        }
      },
      
      /**
      * 弹出卡片详情
      */
      showAnnounceDetail: function () {
        // 省略
      },
    
      /**
      *关闭弹窗
      */
      closeAnnounceDetail: function () {
        // 省略
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
      	// 隐藏返回按钮
        wx.hideHomeButton();
      },
    
    })
    

    上拉触底加载,其实就是把下一页的内容追加到list的尾部,然后设置动画,就很美观了。
    代码里都有很多注释啦,相信聪明的你们,能看懂的!

    完整代码demo

    	以上代码拥有了核心的逻辑思想,有了灵魂,如果想得到整体,程序员进阶从初学到放弃,工资微薄,实属不易,请各位哥哥打赏一下小弟,之后附上下载链接。
    
    展开全文
  • Wxapp-Loading:微信小程序加载框布局LoadingView
  • 1.实现效果 2.实现代码 sss .ring { position: relative; margin: 40rpx auto; width: 80px; height: 80px; text-align: center;...更多loading加载动画 https://gitee.com/susuhhhhhh/wxmini_demo
  • 效果展示 Demo代码 wxml <view class="loading-screen"> <view class="loading"> <view class="flour" ></view> <view class="flour" ></view> <...
  • 用于微信小程序的一个圆形进度组件,支持自定义循环播放图标。
  • 主要介绍了微信小程序自定义toast组件的方法,结合实例形式详细分析了微信小程序自定义toast组件的步骤、实现方法及相关操作技巧,需要的朋友可以参考下
  • 简单总结一下微信动画的实现及执行步骤。 一、实现方式 官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation ...
  • animation-timing-function 规定动画的速度曲线 animation-delay 规定动画何时开始 animation-iteration-count 规定动画被播放的次数 animation-direction 规定动画是否在下一周期逆向地播放 animation-play-state ...
  • 代码地址如下:... 一、前期准备工作 软件环境:微信开发者工具 ...1、基本需求。 实现加载动画 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 2、案例目录结构 ...
  • 主要为大家详细介绍了微信小程序动画实现下拉刷新动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了微信小程序scroll-view组件实现滚动动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 需求:实现点击登入按钮有一个预加载效果,如下图 实例参考一: 实例参考二: 实例一: <view class="body"> <view class="onLoad" wx:if="{{flag2}}"> <view class="loading"> &...
  • 微信小程序-今日头条案例 项目为仿今日头条,使用了百度ApiStore接口查询数据,使用微信组件/api有 封装请求方法,底部tab,启动页动画,loading,scroll-view,swiper,列表页支持上下拉加载更多 > 效果图: 启动欢迎页,...
  • 本文实例讲述了微信小程序实现上拉加载功能。分享给大家供大家参考,具体如下: 开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据。 演示 index.wxml <!-- ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,275
精华内容 4,910
关键字:

微信小程序加载动画

微信小程序 订阅