首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在微信小程序上做一个「博客园年度总结」:小程序部分交互效果实现

,底部的icon为"向上的箭头", 滑动到最后一页时,底部变为【生成我的年度封面】按钮 要实现这个功能,我们需要知道当前是否滑动到了最后一个swiper-item 在swiper标签中有一个bindchange...-- 判断当前是切到哪个轮播图,不是最后一个时,显示上箭头 --> ...-- 判断当前是切到哪个轮播图,当切到最后一个时,不显示上箭头 --> 生成我的年度封面 3、点击按钮跳转至「...【年度总结】page页面就好了 跳转至【年度封面】用的是「非编程式导航」,这里我们用「编程式导航实现」 打开【年度封面】的wxml文件cnblogs_year_cover.wxml ...打开js文件cnblogs_year_cover.js //通过编程式导航跳转到报告页面 gotoreport(e) { wx.navigateTo({ url: '/

87740
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    第五个页面:更多电影页面

    ---- 动态设置导航栏标题 以上我们完成了电影类型的获得,在这之后就需要动态的把获得的数据设置为导航栏标题,这样点击不同的电影类型时就能在更多电影页面的导航栏上显示不同的标题。...官方给出的设置导航栏文档地址如下: https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui.html#wxsettopbartextobject 编辑more-movie.js...---- 实现上加载更多数据 以上我们实现了更多电影页面,但是每次只能加载20条电影数据,我们希望能够有一个上加载更多数据的功能,所以本节就是演示如何实现这样一个功能。...scroll-view> 编辑movie-grid-template.wxss文件内容,给grid-container设置一个固定的高度,因为需要有一个固定的高度才知道是否已经滚动到底部了...或许不能说是下拉页面时的背景颜色,严格来说是Page页面底层下的背景颜色,也就是脱离了Page页面时裸露出来的页面背景

    89420

    React Native 系列(八) -- 导航

    导航条不能自定义 NavigatorIOS 优势: 有系统自带的返回按钮 常用属性 barTintColor : 导航条的背景颜色 navigationBarHidden : 为true , 隐藏导航栏...文件初始化一个路由,指定Component为HelloViewComponent,我们需要先导入HelloViewComponent.js文件到index.ios.js中,因此,index.ios.js...接下来我们来实现界面跳转,以及传递值到下一个界面。...,用来在同一屏幕下切换不同界面 DrawerNavigator: 侧菜单导航栏,用于设置带有抽屉导航的 由于篇幅以及本文标题,在这里,我们只讲述StackNavigator。...背景色,宽高等 headerTitleStyle:设置导航栏文字样式 headerBackTitleStyle:设置导航栏‘返回’文字样式 headerTintColor

    6K80

    仿腾讯课堂固定滚动列表ReactNative组件

    说道这里,我尝试着写了个测试js例子,最外面套一个ReactNative自带的ScrollView并设置视频播放控件的高度为200和 Tab导航控件的style={{height: windowHeight...一开始想两种大的思路:一种是完全靠JS层面,通过ScrollView暴露的API去实现,第二种是原生+JS,这里涉及到几个关键的东西,如何寻找Tab导航控件中的ScrollView或者ListView和控制手势实现的效果...一个是怎么判断手势滑动以及外层滚动容器到底部和内层滚动到顶部? 第二个是寻找滚动组件并通知内层滚动组件开始滚动?...另外,判断手势是往上还是往下滑的问题放到后面说明。...另外注意修改字段,REACT_CLASS = "RNFixedScrollView",这个与JS的模块的名字存在映射。

    4.9K70

    滚动穿透的6种解决方案【已自测】

    需要我们能确保用户在不发生上页面滚动屏幕的情况下就能触发弹层出现,就不会出现我上边说的问题。...关键代码: JS控制弹窗的交互、body的禁止滚动 ? css添加弹层的超出滚动效果 ? 局限问题: 弹层中内容滚动到顶部或底部后,还会连带页面body一起滚动。也就是还会发生穿透效果。...但是同样的问题是,需要判断滚动到顶部和滚动到底部的时候禁止滚动。否则,就和第二条一样,触碰到上下两端,弹窗可滚动区域的滚动条到了顶部或者底部,依旧穿透到body,使得body跟随弹窗滚动。...6、最后把本次移动到的点y2替换给y1,根据手势移动实时更新当前手势的地址。...第二种方法和第六种有一致的情况,如果不小心碰到了弹窗黑色蒙层的上拉下滑,然后的太狠出现了body的底部背景,弹层的滚动效果也就下岗了~ 当然,这个问题也是我们为了测试而特意在黑色蒙层中使劲上拉下滑,倒也不至于是必现的影响用户主要流程的问题

    13.7K31

    优化-采用静态开源导航

    导航页的优化或者说放弃自己写导航页想法,直接在github找了一个开源的项目。...开源导航页地址: https://github.com/appexplore/jianavi hexo下next的优化: # hexo下新建一个page hexo new page navigate #...在source下会生成navigate目录,进入该目录,使用wget下载开源导航页后解压并将所以文件都移动到navigate下,同时删除index.md文件 # 进入hexo的配置文件:_config.yml...问题二:背景图片无法加载 这个问题我反复在css与index.html中检查,发现确实没有什么问题,但背景图片死活加载不出来,后来我的解决办法是注释掉css目录下style.css中的背景图片设置项,然后在...index.html中的body头中加入如下: 部署后背景图片正常显示 OVER

    1.7K10

    react-navigation,刷新你的导航一、属性介绍二、案例

    (2)TabNavigator:类似底部导航栏,用来在同一屏幕下切换不同界面 (3)DrawerNavigator:侧菜单导航栏,用于轻松设置带抽屉导航的屏幕 ?...可以是按钮或者是其他视图控件 headerStyle:设置导航条的样式,背景色及宽高等 headerTitleStyle:设置导航栏文字样式 headerBackTitleStyle:设置导航栏"返回"...安卓端和iOS的文件混合成为index.js文件。而文件App.js注册到了又注册到了index.js文件。故我们将需要用到的代码编写在App.js文件中。...下面可以来做导航的跳转操作 为了实现跳转操作的功能,需要先新建一个页面,并且将这个页面添加到导航中去。 导入页面到App.js文件 import ChatScreen from '....使用该属性可以跳转到下一个界面。下面是HomeScreen中的代码。ChatScreen是第二个导航界面。

    19.7K90

    那些前端常用的网站插件

    Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js...— 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置时触发一个功能 Highlight.js — web 语法高亮 Chart.js — 使用 JavaScript... — 视差滚动 One page scroll — 又一个页面滚动库 Parallax.js — 对智能设备方向变化做出响应的视差引擎 Typeahead.js — 搜索补全 Dragdealer.js... — 炫酷拖拽 Bounce.js — 创建炫酷的 CSS3 动画 Pagepiling.js — 全屏滚动 Multiscroll.js — 两列垂直反向滚动 Favico.js — 动态 favicon... — 自动补全 Slideout.js — 移动应用侧导航 Jquerymy — 使用 jQuery 实现双向数据绑定 Cleave.js — 实时格式化输入内容 Page — 客户端单页应用路由 Selectize.js

    4.5K50

    iOS开发常用之网络

    通过长按选定单元格然后滚动移动到指定位置。 uicollectionview-reordering - UICollectionViews的拖拽(拖动,移动)效果,实例教程。...LTNavigationBar - LTNavigationBar为导航栏添加动态着色效果,可自定义其背景色.Demo包含:1。变换背景色; 2。滚动视图,导航栏和状态栏重叠。...HUMSlider - HUMSlider是一款能够自动显示刻度记号的滑杆,滑动到某处,该处的刻度会自动上升,两边还能配置图像。支持代码或storyboard中实现。...KGFloatingDrawer - 侧菜单,qq类似,KyleGoddard / KGFloatingDrawer:一款适合于大屏手机或平板的浮动抽屉式导航界面组件。...MMDrawerController - 最多人用的一个有关侧边“抽屉”导航框架,里面还有很多你意想不到的交互效果,侧

    23.6K10

    06-移动端开发教程-fullpage框架

    可设置滚动宽度,背景颜色,滚动速度,循环选项,回调,文本对齐方式等。...navigationPosition 字符串 right 项目导航的位置,可选 left 或 right navigationColor 字符串 #000 项目导航的颜色 navigationTooltips...数组 空 项目导航的 tip slidesNavigation 布尔值 false 是否显示左右滑块的项目导航 slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置,可选...top 或 bottom controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色 loopBottom 布尔值 false 滚动到最底部后是否滚回顶部 loopTop 布尔值...--另外不能在初始化的设置:lazyLoading: true ,不能为false--> 案例2:设置不同屏的背景色 $('#fullpage').fullpage({ sectionsColor

    5.1K90

    06-移动端开发教程-fullpage框架

    可设置滚动宽度,背景颜色,滚动速度,循环选项,回调,文本对齐方式等。...navigationPosition 字符串 right 项目导航的位置,可选 left 或 right navigationColor 字符串 #000 项目导航的颜色 navigationTooltips...数组 空 项目导航的 tip slidesNavigation 布尔值 false 是否显示左右滑块的项目导航 slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置,可选...top 或 bottom controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色 loopBottom 布尔值 false 滚动到最底部后是否滚回顶部 loopTop 布尔值...--另外不能在初始化的设置:lazyLoading: true ,不能为false--> 案例2:设置不同屏的背景色 $('#fullpage').fullpage({ sectionsColor

    5.1K50

    Flutter常用的布局和事件示例详解

    以及手势事件和滚动事件的使用 Scaffold 导航栏的实现,有些路由页可能会有抽屉菜单(Drawer)以及底部Tab导航菜单等 const Scaffold({ Key key, this.appBar...this.body,//内容 this.floatingActionButton,//悬浮按钮 this.persistentFooterButtons,//底部持久化现实按钮 this.drawer,//侧菜单左...this.endDrawer,//侧菜单右 this.bottomNavigationBar,//底部导航 this.backgroundColor,//背景颜色 this.resizeToAvoidBottomPadding...color: 背景颜色 decoration: 背景装饰 foregroundDecoration: 前景装饰 width:容器的宽 height:容器的高 constraints:容器宽高的约束,容器最终的宽高最终都要受到约束中定义的宽高影响...this.scrollDirection = Axis.horizontal,Axis.vertical//设置滚动方向 横向和竖向 pageSnapping true 带有阻力的滑动,如果设置为false滑动到哪就停止到哪

    2.2K40

    uni-app 安卓APP开发记录

    1.使用uni-nav-bar 自定义导航栏 需要先在page.js中把当前页面设置 "navigationStyle": "custom" 然后在页面中使用uni-nav-bar     <uni-nav-bar...      dark       id="tabbar"       class="tabBar"       title="<em>导航</em>栏组件"       :statusBar="true"     > 需要设置:statusBar="true",不然导航会跟手机顶部的状态栏重叠 在不知道这个属性之前,发现可以通过设置--status-bar-height(uni-app全局封装的变量...$emit(`${this.topMed}`, dista) : null;       console.log("触发了上方法!")...("左触发方法");       /*         业务逻辑 ....       */     },     // 右触发方法     scrollR() {       /*

    81220

    Android实现图片滚动控件,含页签功能,让你的应用像淘宝一样炫起来

    实现原理其实还是之前那篇文章Android滑动菜单特效实现,仿人人客户端侧效果,史上最简单的侧实现  ,算是以那个原理为基础的另外一个变种。...如果手指移动的距离是负数,则认为当前手势是想要滚动到下一个菜单元素。 * * @return 当前手势想滚动到下一个菜单元素返回true,否则返回false。...如果手指移动距离大于屏幕的1/2,或者手指移动速度大于SNAP_VELOCITY, * 就认为应该滚动到下一个菜单元素。...* * @return 如果应该滚动到下一个菜单元素返回true,否则返回false。...第一个LinearLayout中要放入需要滚动显示的图片,这里我们加入了四个Button,每个Button都设置了一张背景图片。

    20210

    Android实现图片滚动和页签控件功能的实现代码

    实现原理其实还是之前那篇文章Android仿人人客户端滑动菜单的侧菜单效果,史上最简单的侧实现 ,算是以那个原理为基础的另外一个变种。...如果手指移动的距离是负数,则认为当前手势是想要滚动到下一个菜单元素。 * * @return 当前手势想滚动到下一个菜单元素返回true,否则返回false。...如果手指移动距离大于屏幕的1/2,或者手指移动速度大于SNAP_VELOCITY, * 就认为应该滚动到下一个菜单元素。...* * @return 如果应该滚动到下一个菜单元素返回true,否则返回false。...第一个LinearLayout中要放入需要滚动显示的图片,这里我们加入了四个Button,每个Button都设置了一张背景图片。

    1.8K10
    领券