[VueConf 2019]快手前端-天翔 - 分享探索Web编程的另一种形态

41 篇文章 0 订阅
14 篇文章 0 订阅

2019年6月8日来自全球各地的开发者齐聚上海交通大学文治堂,一起见证了VueConf 2019 上海的成功举办。

天翔 
快手前端架构师,游戏直播团队前端负责人。

 

在大会上,快手前端架构师,游戏直播团队前端负责人天翔给大家带来了主题为

“探索Web编程的另一种形态”的主题演讲。

 

主题介绍:在去年各家如火如荼的小程序搭建过程中,快手内部也曾尝试过小程序平台的搭建,在这过程中,我们基于Vue.js封装了一个demo级别的小程序以供演示,并探索了现有Web编程种是否能够有其他编程形态的存在,这次分享中,我会将当时基于Vue.js做的快手小程序设计进行分享,并探索在Web下是否有其他编程的可能性。

 

我们一起来看看现场情况:

这是会场门外

 

会场座位全景

演讲台

 

 

天翔现场演讲

Vue.js全职员工合影

 

 

部分参会人员合影

俞天翔,就职于快手,现任前端架构师,游戏直播团队前端负责人。作为行业享有盛名的大咖,俞天翔行事低调,对工作热情饱满,多次受邀作为嘉宾出席各类大会,并发表精彩演讲。

分享主题:再谈Vue SSR -- 响应式数据流在快手游戏直播中的应用

主题介绍:

快手游戏直播第一版本上线以后,随着业务迭代,逐渐发现了一些问题,比如:

1、同构应用中是否能够更好的方式来明确Service边界;

2、对于持续性数据的封装、转换,状态的聚合、分发,是否有其他的手段来管理。

基于以上问题,我们选择通过xstream与Apollo GraphQL对现有项目进行重构,本次演讲中会以此为切入点,通过讲解我们的架构迁移中的思考,希望与会者们对响应式数据的应用有一个新的启发。

PPT下载阅读

 

探索Web编程的另一种形态-俞天翔.pdf(4.3 MB)

后台回复数字2,免费领取PPT演讲课件。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
快手小程序中,`scroll-view` 组件本身并没有直接支持下拉刷新功能,但你可以通过使用 `scroll-view`、`view` 和 `scroll-into-view` 等组件及相关事件来模拟实现下拉刷新效果。下面是一个示例代码: ```html <view class="container"> <scroll-view scroll-y="{{true}}" scroll-with-animation="{{true}}" bindscrolltoupper="onScrollToUpper" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd" > <!-- 内容区域 --> </scroll-view> </view> ``` ```javascript Page({ data: { refreshing: false, // 是否正在刷新 startTouchY: 0, // 触摸起始位置的 Y 坐标 refreshHeight: 80, // 下拉刷新的高度 }, onScrollToUpper() { if (!this.data.refreshing) { this.setData({ refreshing: true }); this.refreshData(); } }, onTouchStart(event) { this.setData({ startTouchY: event.touches[0].pageY }); }, onTouchMove(event) { const startY = this.data.startTouchY; const moveY = event.touches[0].pageY; const distanceY = moveY - startY; if (distanceY > 0 && startY < 100) { this.setData({ refreshHeight: distanceY > 80 ? 80 : distanceY }); } }, onTouchEnd() { if (this.data.refreshHeight >= 80) { if (!this.data.refreshing) { this.setData({ refreshing: true }); this.refreshData(); } } else { this.setData({ refreshHeight: 0 }); } }, refreshData() { // 下拉刷新时执行的操作 // 可以在这里发送请求获取最新数据,并更新页面 // 示例代码,假设请求返回的数据为 newData wx.request({ url: 'https://api.example.com/data', // 请求接口地址 success: (res) => { const newData = res.data; // 更新页面数据 this.setData({ data: newData, refreshHeight: 0, refreshing: false }); } }); } }); ``` 在上面的示例代码中,我们通过 `scroll-view` 组件实现滚动区域,在 `scroll-view` 上绑定了 `bindscrolltoupper` 事件,当滚动到顶部时触发下拉刷新操作。同时,我们使用 `bindtouchstart`、`bindtouchmove` 和 `bindtouchend` 事件来监听用户的触摸操作,并根据触摸的位置和移动的距离来控制下拉刷新的效果。 当用户触摸结束后,如果下拉的距离超过设定的刷新高度(这里设为80),则执行下拉刷新操作,发送请求获取最新数据,并更新页面。刷新完成后,将 `refreshHeight` 设置为0,同时将 `refreshing` 设置为false,以停止下拉刷新的效果。 需要注意的是,上述代码仅为模拟实现下拉刷新效果,实际开发中可能需要根据具体需求进行调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值