有一个基于最近开发的仿微信聊天程序的朋友圈功能。

Svelte3聊天室| |Svelte SvelteKit实战项目

今天，我将告诉您如何使用svelte mescroll实现下拉旋转效果。

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

安装mescroll依赖

$ npm i me -S

引入组件

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

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

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

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