收藏
回答

今日头条小程序首页

有没有人知道今日头条上面tab选择,下面页面自动切换,滑动页面,tab页也会跟着变化,而且可以上拉加载更多,我用的swiper嵌套scroll-view做的,但是这样上下滑动页面的时候会出现卡顿,但是今日头条的就没有,求指教

最后一次编辑于  2018-11-09  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • 半寸灰
    半寸灰
    2018-11-09

    其实 是

    scroll-view


    https://developers.weixin.qq.com/s/7LvJsNml7b3H

    2018-11-09
    赞同
    回复 2
    • 胖胖
      胖胖
      2018-11-12

      你这个只是上面的tab选择

      2018-11-12
      回复
    • 半寸灰
      半寸灰
      2018-11-12回复胖胖

      下面的

      Swiper

      有点复杂就不弄了

      2018-11-12
      回复
  • 无敌奶爸、啊
    无敌奶爸、啊
    2018-11-09

    我猜啊:


    tab 应该是 position:fixed 固顶,下面栏目内容列表封装成组件,一个栏目一个组件,通过swiper实现左右滑动。


    上下滑如果不用scroll view的话只能自己模拟


    禁止page的 scroll 滚动, 监控 touchmove事件,然后修改内容组件的margin-top,配合css3动画实现滚动效果,难点在于怎么判断内容是否到底了



    2018-11-09
    赞同
    回复 3
    • 胖胖
      胖胖
      2018-11-12

      我是用swiper+scroll-view做的,滑动起来卡,很不流畅,今日头条的就不会

      2018-11-12
      回复
    • 无敌奶爸、啊
      无敌奶爸、啊
      2018-11-12回复胖胖

      可以确认今日头条用的是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>



      2018-11-12
      回复
    • 胖胖
      胖胖
      2018-11-12回复无敌奶爸、啊

      我也是这么写的,,但是滚动到顶部或者底部的时候,如果滚的快,老是会遮挡一部分,不能全部显示,,慢点滚就没事

      2018-11-12
      回复
  • 你吼那么大声干什么
    你吼那么大声干什么
    2018-11-09

    我朋友做了一个类似的,


    还有就是为什么饿了么小程序的点餐功能做得这么好,我写得这么垃圾,


    你们要是认识做饿了么小程序的开发人员,请帮我请教一下


    --萌新的回答

    2018-11-09
    赞同
    回复