小程序
小游戏
企业微信
微信支付
扫描小程序码分享
有没有人知道今日头条上面tab选择,下面页面自动切换,滑动页面,tab页也会跟着变化,而且可以上拉加载更多,我用的swiper嵌套scroll-view做的,但是这样上下滑动页面的时候会出现卡顿,但是今日头条的就没有,求指教
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
其实 是
scroll-view
https://developers.weixin.qq.com/s/7LvJsNml7b3H
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
你这个只是上面的tab选择
下面的
Swiper
有点复杂就不弄了
哈
我猜啊：
tab 应该是 position:fixed 固顶，下面栏目内容列表封装成组件，一个栏目一个组件，通过swiper实现左右滑动。
上下滑如果不用scroll view的话只能自己模拟
禁止page的 scroll 滚动， 监控 touchmove事件，然后修改内容组件的margin-top，配合css3动画实现滚动效果，难点在于怎么判断内容是否到底了
我是用swiper+scroll-view做的,滑动起来卡,很不流畅,今日头条的就不会
可以确认今日头条用的是scroll-view。源码如下：
<scroll-view scrollWithAnimation scrollX class=
"channel-container {{channels.length>6?'channel-container-more':''}}"
scrollLeft=
"{{topChannelScrollLeft}}"
style=
"{{editChannelButtonHidden?'':'padding-right: 195rpx'}}"
>
<view bindtap=
"onTapChannel"
class=
"channel-item {{channelActiveIndex==index?'channel-item-active':''}} {{index===0?'channel-item-first':''}} {{channels.length===index?'channel-item-last':''}}"
data-index=
"{{index}}"
wx:
for
=
"{{channels}}"
-item=
"channel"
wx:key=
"{{ channel.name }}"
<text class=
"channel-name"
>{{channel.name}}</text>
</view>
</scroll-view>
<swiper bindchange=
"onSwiperChange"
"swiper-channel-container"
current=
"{{swiperActiceIndex}}"
duration=
"{{swiperDuration}}"
lowerThreshold=
"0"
<swiper-item wx:
<scroll-view bindscrolltolower=
"bindscrolltolower"
enableBackToTop=
"true"
scrollIntoView=
"{{channel.scrollToView}}"
scrollTop=
"{{scrollTop}}"
scrollWithAnimation=
"{{scrollWithAnimation}}"
scrollY=
"{{listCanScroll}}"
"height: 100%"
<view class=
"pulldown-info-box"
"pulldown-info {{channel.showRefreshInfo?'pulldown-info-show':''}}"
if
"{{channel.refreshNum>0}}"
>今日头条推荐引擎有{{channel.refreshNum}}条更新</text>
else
>暂无数据更新</text>
<template is=
"loading_textpage"
data=
"{{hidden:channel.lists.length>0}}"
></template>
<view animation=
"{{item._animation||''}}"
"item-wrapper {{item._hide?'item-wrapper-hide':''}}"
id=
"item_{{item.item_id}}"
"{{channel.lists}}"
"{{ item.item_id }}"
"{{item.mode}}"
"{{item:item,bindtap:'onTap',channelName:channels[channelActiveIndex].name,city:city}}"
<form reportSubmit bindsubmit=
"bindSubmitFormId"
"{{channel.name!=='视频'}}"
<button bindtap=
"dislike"
"button-dislike"
data-group-id=
"{{item.group_id}}"
formType=
"submit"
hidden=
"{{item.mode==='refresh_history_mode'||item.mode==='location_mode'}}"
"{{item.mode==='middle_mode'?'right: 275rpx;':''}}"
<image class=
"dislike-icon"
src=
"../../static/images/dislike.png"
></image>
</button>
</form>
<button plain sendMessageImg sendMessagePath showMessageCard id=
"contactMeButton"
openType=
"contact"
sendMessageTitle=
"我的今日头条小程序"
sessionFrom=
"unionId-{{context.loginUser&&context.loginUser.unionId?context.loginUser.unionId:'none'}}"
"{{item.contact===true}}"
></button>
"reachBottom-loading"
"{{channel.lists.length>0}}"
>加载中...</view>
</swiper-item>
</swiper>
我也是这么写的,,但是滚动到顶部或者底部的时候,如果滚的快,老是会遮挡一部分,不能全部显示,,慢点滚就没事
我朋友做了一个类似的，
还有就是为什么饿了么小程序的点餐功能做得这么好，我写得这么垃圾，
你们要是认识做饿了么小程序的开发人员，请帮我请教一下
--萌新的回答
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
其实 是
scroll-view
https://developers.weixin.qq.com/s/7LvJsNml7b3H
你这个只是上面的tab选择
下面的
Swiper
有点复杂就不弄了
哈
我猜啊：
tab 应该是 position:fixed 固顶，下面栏目内容列表封装成组件，一个栏目一个组件，通过swiper实现左右滑动。
上下滑如果不用scroll view的话只能自己模拟
禁止page的 scroll 滚动， 监控 touchmove事件，然后修改内容组件的margin-top，配合css3动画实现滚动效果，难点在于怎么判断内容是否到底了
我是用swiper+scroll-view做的,滑动起来卡,很不流畅,今日头条的就不会
可以确认今日头条用的是scroll-view。源码如下：
<scroll-view scrollWithAnimation scrollX class="channel-container {{channels.length>6?'channel-container-more':''}}"scrollLeft="{{topChannelScrollLeft}}"style="{{editChannelButtonHidden?'':'padding-right: 195rpx'}}"><view bindtap="onTapChannel"class="channel-item {{channelActiveIndex==index?'channel-item-active':''}} {{index===0?'channel-item-first':''}} {{channels.length===index?'channel-item-last':''}}"data-index="{{index}}"wx:for="{{channels}}"wx:for-item="channel"wx:key="{{ channel.name }}"><text class="channel-name">{{channel.name}}</text></view></scroll-view><swiper bindchange="onSwiperChange"class="swiper-channel-container"current="{{swiperActiceIndex}}"duration="{{swiperDuration}}"lowerThreshold="0"><swiper-item wx:for="{{channels}}"wx:for-item="channel"wx:key="{{ channel.name }}"><scroll-view bindscrolltolower="bindscrolltolower"enableBackToTop="true"scrollIntoView="{{channel.scrollToView}}"scrollTop="{{scrollTop}}"scrollWithAnimation="{{scrollWithAnimation}}"scrollY="{{listCanScroll}}"style="height: 100%"><view class="pulldown-info-box"><text class="pulldown-info {{channel.showRefreshInfo?'pulldown-info-show':''}}"wx:if="{{channel.refreshNum>0}}">今日头条推荐引擎有{{channel.refreshNum}}条更新</text><text class="pulldown-info {{channel.showRefreshInfo?'pulldown-info-show':''}}"wx:else>暂无数据更新</text></view><template is="loading_textpage"data="{{hidden:channel.lists.length>0}}"></template><view animation="{{item._animation||''}}"class="item-wrapper {{item._hide?'item-wrapper-hide':''}}"id="item_{{item.item_id}}"wx:for="{{channel.lists}}"wx:key="{{ item.item_id }}"><template is="{{item.mode}}"data="{{item:item,bindtap:'onTap',channelName:channels[channelActiveIndex].name,city:city}}"></template><form reportSubmit bindsubmit="bindSubmitFormId"wx:if="{{channel.name!=='视频'}}"><button bindtap="dislike"class="button-dislike"data-group-id="{{item.group_id}}"formType="submit"hidden="{{item.mode==='refresh_history_mode'||item.mode==='location_mode'}}"style="{{item.mode==='middle_mode'?'right: 275rpx;':''}}"><image class="dislike-icon"src="../../static/images/dislike.png"></image></button></form><button plain sendMessageImg sendMessagePath showMessageCard id="contactMeButton"openType="contact"sendMessageTitle="我的今日头条小程序"sessionFrom="unionId-{{context.loginUser&&context.loginUser.unionId?context.loginUser.unionId:'none'}}"wx:if="{{item.contact===true}}"></button></view><view class="reachBottom-loading"wx:if="{{channel.lists.length>0}}">加载中...</view></scroll-view></swiper-item></swiper>我也是这么写的,,但是滚动到顶部或者底部的时候,如果滚的快,老是会遮挡一部分,不能全部显示,,慢点滚就没事
我朋友做了一个类似的，
还有就是为什么饿了么小程序的点餐功能做得这么好，我写得这么垃圾，
你们要是认识做饿了么小程序的开发人员，请帮我请教一下
--萌新的回答