专栏首页前端开发随笔微信小程序导航栏页面滑动切换

微信小程序导航栏页面滑动切换

<view class="banner">
  <scroll-view scroll-x="true" scroll-with-animation="true" scroll-into-view="nav-{{select > 0 ? select -1 : select}}">
    <view wx:for="{{sortList}}" wx:for-index="index" wx:key="index" id="nav-{{index}}"
      class="sort {{index == select ? 'choose' : ''}}" data-index='{{index}}' bindtap="activeTab">
      {{item.name}}
      <view class="line" wx:if="{{index == select}}"></view>
    </view>
  </scroll-view>
</view>
<swiper style="height:{{height}}px" current="{{select}}" duration="300" bindchange="activeSw">
  <swiper-item wx:for="{{sortList.length}}" wx:key="index">
    <view class="box">
      <view class="place" wx:for="{{placeList}}" wx:key="index">{{index}}</view>
    </view>
  </swiper-item>
</swiper>
.banner {
  position: sticky;
  top: 0;
  width: 100%;
  height: 80rpx;
  background: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
  border-top: 1rpx solid #f5f5f5;
  border-bottom: 1rpx solid #f5f5f5;
  z-index: 10;
}

.banner scroll-view {
  height: 100%;
}

.sort {
  position: relative;
  display: inline-block;
  font-size: 32rpx;
  margin-right: 70rpx;
  line-height: 80rpx;
  height: 100%;
}

scroll-view .sort:last-child {
  margin-right: 0rpx;
}

.choose {
  color: #16BA98;
}

.line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5rpx;
  border-radius: 10rpx;
  background: #16BA98;
  animation: spread .3s;
}

@keyframes spread {
  0% {
    width: 0;
    left: 50%;
  }

  100% {
    width: 100%;
    left: 0;
  }
}

.place {
  height: 800rpx;
}
const app = getApp()
Page({
  data: {
    select: 0,
    height: 0,
    sortList: [{
        name: '电视剧'
      },
      {
        name: '电影'
      },
      {
        name: '综艺'
      },
      {
        name: '少儿'
      },
      {
        name: '动漫'
      },
      {
        name: 'NBA'
      },
      {
        name: '体育'
      },
      {
        name: '财经'
      },
      {
        name: '历史'
      },
    ],
    placeList: [1, 2, 3, 4]
  },

  onLoad() {
    this.watchHeight()
  },

  // 触发tab导航栏
  activeTab(e) {
    var index = e.currentTarget.dataset.index
    this.setData({
      select: index
    })
    this.generalEv()
    this.watchHeight()
  },

  // 滑动swiper
  activeSw(e) {
    var index = e.detail.current
    this.setData({
      select: index
    })
    this.generalEv()
    this.watchHeight()
  },

  // 监听swiper高度
  watchHeight() {
    var query = wx.createSelectorQuery()
    query.select('.box').boundingClientRect((res) => {
      this.setData({
        height: parseInt(res.height)
      })
    }).exec()
  },

  // 初始化值
  generalEv() {
    this.setData({
      placeList: [1, 2, 3, 4]
    })
    // 回到顶部
    wx.pageScrollTo({
      scrollTop: 0
    })
  },

  onReachBottom: function () {
    var list = this.data.placeList
    list.push(1, 2, 3, 4)
    this.setData({
      placeList: list
    })
    this.watchHeight()
  },
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序锚点选择导航栏

    wePanda
  • Vue实现pc/H5弹窗拖拽

    wePanda
  • 微信小程序实现canvas生成海报保存到本地

    wePanda
  • 秒懂,Java 注解 (Annotation)你可以这样用

    它们是Target、Retention、Documented和Inherited。

    lyb-geek
  • 基于Hadoop生态圈的数据仓库实践 —— 环境搭建(一)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    用户1148526
  • 微信聊天图片大小生成算法~

    本文作者:IMWeb DeepKolos 原文出处:IMWeb社区 未经同意,禁止转载 今天仿微信聊天时候的图片大小, 描了十几个点 , 用了半个早上...

    IMWeb前端团队
  • 微信聊天图片大小生成算法~

    今天仿微信聊天时候的图片大小 , 描了十几个点 , 用了半个早上的苦力时间 , 把结果分享一下下~

    IMWeb前端团队
  • 最大似然估计 最大后验估计

    MLE: 首先看机器学习基础篇——最大后验概率关于离散分布的举例(就是樱桃/柠檬饼干问题) 可见,MLE是在各种概率中,找出使发生事实概率最大的那个概率。 ...

    平凡的学生族
  • 哪三个热门市场正在经历云计算带来的颠覆?

    云原生计算可能是当今企业IT中最重要的趋势。从本质上讲,云原生技术将云计算的优势扩展到整个IT领域,其中包括内部部署技术和边缘计算。

    静一
  • Java、模式、美眉、篮球 Java设计模式算法数据结构体育

    1、FACTORY一追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个...

    阿敏总司令

扫码关注云+社区

领取腾讯云代金券