微信小程序实现tab页面切换功能

简介: 微信小程序实现tab页面切换功能

wxml

<scroll-view scroll-x="true" class="ip_tab_comtainer">
  <view class="ip_tab_comtainer_padd"></view>
  <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">
    <view class="{{ip.isSelect?'ip_tab_item_s':'ip_tab_item_n'}}" bindtap="onIpItemClick" wx:key="{{ip.id}}" data-item="{{ip}}">
      {{ip.title}}
    </view>
  </block>
  <view class="ip_tab_comtainer_padd"></view>
</scroll-view>
<view class='content'>
{{content}}
</view>

wxss

.ip_tab_comtainer {
    width: 100%;
    background-color: #F5F5F5;
    padding: 20rpx 0 0;
    white-space: nowrap;
}
.ip_tab_comtainer_padd {
    display: inline-block;
    width: 24rpx;
}
.ip_tab_item_s {
    display: inline-block;
    line-height: 40rpx;
    padding: 12rpx 32rpx;
    color: #91daf9;
    margin-right: 8rpx;
    margin-left: 8rpx;
    font-size: 28rpx;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #91daf9;
}
.ip_tab_item_n {
    display: inline-block;
    padding: 12rpx 32rpx;
    line-height: 40rpx;
    color: #353535;
    margin-right: 8rpx;
    background-color: #ffffff;
    margin-left: 8rpx;
    font-size: 28rpx;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 4rpx;
    border: 1px solid #CCCCCC;
}
/**
去除横向滚动条
*/
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}
.content{
  width: 100%;
}

js

// pages/horizontal-scroll_tab/horizontal-scroll_tab.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    ips: [
      { id: "1", title: "日统计", isSelect:true },
      { id: "2", title: "月统计", isSelect: false},
      { id: "3", title: "年统计", isSelect: false},
    ],
    content:"全部"
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
    * item点击事件
    */
  onIpItemClick: function (event) {
    console.log(event);
    var id = event.currentTarget.dataset.item.id;
    var curIndex = 0;
    for (var i = 0; i < this.data.ips.length; i++) {
      if (id == this.data.ips[i].id) {
        this.data.ips[i].isSelect = true;
        curIndex = i;
      } else {
        this.data.ips[i].isSelect = false;
      }
    }
    this.setData({
      content: this.data.ips[curIndex].title,
      ips: this.data.ips,
    });
  },
})
相关文章
|
29天前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
|
2月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
3月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
795 1
|
3月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
144 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
3月前
|
小程序 Linux Python
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
37 1
|
4月前
|
算法 JavaScript 前端开发
切西瓜法实现微信抢红包功能
该文章介绍了使用“切西瓜法”和“栅栏法”两种算法来模拟微信抢红包的随机分配机制,并通过具体的JavaScript代码实现了红包金额的公平随机分配过程。
切西瓜法实现微信抢红包功能
|
4月前
|
人工智能 前端开发 JavaScript
MacTalk 测评通义灵码,实现“微信表情”小功能
墨问西东创始人池建强分享了团队使用通义灵码的经验。
|
4月前
|
小程序 API 开发工具
使用python 实现微信签到提醒功能
【9月更文挑战第4天】使用python 实现微信签到提醒功能
102 2
|
5月前
|
Web App开发 缓存 小程序
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
|
5月前
|
小程序 前端开发 开发者

热门文章

最新文章