微信小程序顶部选项卡 tabs 下拉刷新

jweicao

于 2021-05-29 19:50:29 发布

阅读量973

点赞数

文章标签：小程序微信游戏 html js

本文链接：https://blog.youkuaiyun.com/jweicao/article/details/117390038

版权

本文介绍了如何在微信小程序中为顶部选项卡tabs实现下拉刷新功能。内容包括wxml页面的swiper滑动切换设置，wxss样式的编写，以及重点的js部分，利用json页面实现单个页面的下拉刷新配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序顶部选项卡 tabs 下拉刷新

**首先 wxml 页面带swiper 滑动切换功能 **

<!--pages/my/my.wxml-->
<view class="swiper-tab">
  <view class="tab-item {
    {currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">每日体重</view>
  <view class="tab-item {
    {currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">体重趋势</view>
</view>
<swiper current="{
    {currentTab}}" class="swiper" duration="300" style="height:{
       {
       winHeight - 30}}px"
  bindchange="bindChange">
  <swiper-item class="item">
    <view class="record">
      <view class="title">体重记录</view>
      <view class="desc">记录目标,减肥更有动力</view>
      <view class="btn" bindtap="record">记录今天体重</view>
    </view>
    <scroll-view scroll-y="true" style="height: 300px;"  bindscrolltolower="bottom"  >
      <block wx:for="{
    {weight}}">
        <view class="top">
          <view class="date">{
  {item.date}}</view>
          <view class=