最近基于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>

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