小程序官方虽然自带了loading图,但是不好看,没有特点,特色,今天我们就写下自定义loading

先看效果图

  • 使用到的gif

准备工作

  • loading.io

loading.io提供了多种loading图,须付费下载,我们作为一名程序猿,网页上有的东西,我们就能取到-_-

  • 获取gif图F12,用鼠标选中需要链接的元素,就可以看到了,然后下载到本地,这一步就完成了

  • 创建文件夹images,将上面下载的gif图保存至这个images文件夹

  • wxml代码如下
<view wx:if style='height:{{dh}}px;text'>
    <image src='../../images/preloader.gif' class='loading'></image>
</view>
  • js代码如下
const app = getApp()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        dh: app.globalData.dh,
        posts: [],
        isEnd:true//判断loading是否显示
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        this.queryPosts();
    },
  <!--  查询文章-->
    queryPosts: function(postTitle) {
        var that = this;
        const db = wx.cloud.database()
        db.collection('posts').orderBy('data', 'desc')
            .get()
            .then(res => {
                console.log(res.data)
                that.setData({
                    posts: res.data,
                    current : res.data.length-1,
                    isEnd:false
                })
            })
            .catch(console.error)
    }
})

最后

晒下自己闲时写的一款小程序每观
  • 特点

    • 支持切换皮肤
    • 每日精选一文
    • 不需要获取用户信息,简洁
  • 白天模式

  • 夜间模式

  • 小程序码或者微信搜索每观

  • 有事可以留言~

扫描二维码,在手机上阅读!