最近基于svelte.js开发的仿微信聊天项目，有一个朋友圈功能。

svelte3聊天室｜Svelte+SvelteKit实战项目

今天给大家分享一下如何利用svelte+mescroll实现下拉转圈圈效果。

首先新建一个uzone.svelte页面。

安装mescroll依赖

$ npm i mescroll.js -S

引入组件

import MeScroll from 'mescroll.js/mescroll.min.js'
import 'mescroll.js/mescroll.min.css'

注意：在svelte项目中引入mescroll插件，只能在onMount阶段执行。

<script>
    import { onMount } from 'svelte'
	
    import MeScroll from 'mescroll.js/mescroll.min.js'
    import 'mescroll.js/mescroll.min.css'
	
    onMount(() => {
        let mescroll = new MeScroll('mescroll', {
            down: {
                auto: false,
                offset: 40,
                callback: downCallback
            },
            // up: {
            //     callback: upCallback
            // }
        })
        // 下拉刷新的回调
        function downCallback() {
            console.log('下拉刷新...')
            setTimeout(() => {
                // 隐藏下拉刷新的状态;
                mescroll.endSuccess()
            }, 2000)
        }
        // 上拉加载的回调
        function upCallback(page) {
            console.log('上拉加载...')
            var pageNum = page.num; // 页码, 默认从1开始
            var pageSize = page.size; // 页长, 默认每页10条
        }
    })
	
	// ...
</script>

模板结构

<Navbar title="朋友圈" center bgcolor={headerbg} transparent>
    <svelte:fragment slot="right">
        <div><i class="iconfont icon-tupian"></i></div>
        <div class="ml-30"><i class="iconfont icon-fabu"></i></div>
    </svelte:fragment>
</Navbar>

<div class="sv__scrollview flex1 bg-fff">
    <div id="mescroll" class="mescroll mescroll__uzone">
        <div>
            <div class="sv__uzone">
                ...
            </div>
        </div>
    </div>
</div>

图片预览功能是基于svelte开发的弹窗组件svelte-popup来实现效果。

<Popup bind:open={isVisibleImgPopup} position="top">
    <svelte:fragment slot="richtext">
        <div class="flexbox flex-col" style="height: 100%;">
            <Navbar bgcolor="transparent" transparent>
                <svelte:fragment slot="right">
                    <div class="ml-30"><i class="iconfont icon-shareQzone"></i></div>
                    <div class="ml-30"><i class="iconfont icon-shareWX"></i></div>
                    <div class="ml-30"><i class="iconfont icon-shareWB"></i></div>
                </svelte:fragment>
            </Navbar>
            <div class="flex1 flex-c flex-justifyc" on:click={()=>isVisibleImgPopup=false}>
                <img src={imgSrc} alt="" style="max-width: 100%;" />
            </div>
        </div>
    </svelte:fragment>
</Popup>

好了，今天的分享就到这里。