微信小程序标签页组件

组件JS

// components/tag/index.js
Component({options: {multipleSlots: true},lifetimes: {attached: function () {// 在组件实例进入页面节点树时执行let that = thisthis.setData({tabWidth: wx.getSystemInfoSync().windowWidth / 4,tab: this.data.newTab,contentWidth: wx.getSystemInfoSync().windowWidth,}, _ => {that.triggerEvent("changeTab", that.data.currentMeta);})},detached: function () {// 在组件实例被从页面节点树移除时执行},},ready() {this.queryDom(0)this.queryDomFlexd()},/*** 组件的属性列表*/properties: {newTab: {type: Array,value: [{ title: '标签一', meta: 1 },{ title: '标签二', meta: 2 },{ title: '标签三', meta: 3 },{ title: '标签四', meta: 4 },]}},/*** 组件的初始数据*/data: {tab: [],tabWidth: '',lineLeft: '',textWidth: '1',currentMeta: 1,contentWidth: '100%',contentRight: '0',perch: '0'},/*** 组件的方法列表*/methods: {changeTab(e) {let that = thislet { id } = e.currentTarget.datasetthis.queryDom(id - 1)this.changeContent(id - 1)this.setData({currentMeta: id}, _ => {that.triggerEvent("changeTab", id);})},queryDomFlexd() {let that = thisconst query = wx.createSelectorQuery().in(this)query.select('.tag-flexd').boundingClientRect(function (res) {that.setData({perch: res.height,contentHeight: wx.getSystemInfoSync().windowHeight - res.height})}).exec()},queryDom(index = 0) {let that = thisconst query = wx.createSelectorQuery().in(this)query.selectAll('.text').boundingClientRect(function (res) {that.setData({lineLeft: res[index].left,textWidth: res[index].width})}).exec()},changeContent(index = 0) {this.setData({contentRight: index * this.data.contentWidth})}}
})

组件wxml

<!-- components/tag/index.wxml -->
<view class="tag-wrap"><view class="tag-flexd"><view class="tag-head"><view bindtap='changeTab' data-id='{{item.meta}}' class="text-center {{currentMeta==item.meta?'active':'normol'}}" wx:for="{{tab}}" wx:key="key" style="width:{{tabWidth}}px"><text class="text">{{item.title}}</text></view></view><view class="line" style="transform: translateX({{lineLeft}}px);width:{{textWidth}}px"></view></view><view style="height:{{perch}}px"></view><view class="tag-content-wrap" style="width:{{4*contentWidth}}px;transform: translateX(-{{contentRight}}px);"><view class="tag-content-item" wx:for="{{tab}}" wx:key='key' style="width:{{contentWidth}}px;height:{{contentHeight}}px"><slot name='{{item.meta}}'></slot></view></view>
</view>

组件CSS

/* components/tag/index.wxss */
.tag-wrap {overflow: hidden;
}
.tag-wrap .tag-flexd {position: fixed;top: 0;z-index: 999;
}
.tag-wrap .tag-head {display: flex;font-size: 32rpx;
}
.tag-wrap .text-center {text-align: center;
}
.tag-wrap .line {transition: .3s ease all;height: 8rpx;border-radius: 8rpx;background-color: #ee0a24;margin-top: 10rpx;
}
.tag-head .active {font-weight: bold;transition: .3s ease all;color: black;
}
.tag-wrap .normol {color: #646566;
}
.tag-wrap .tag-content-wrap {position: relative;/* width: 400%; */overflow-x: hidden;display: flex;transition: .3s ease all;
}
.tag-wrap .tag-content-item {/* width:100%; */height:100vh;
}

页面调用wxml

<!-- 标签页 -->
<tag newTab='{{temp}}' bindchangeTab='changeTab'><view slot='1'>标签一</view><view slot='2'>标签二</view><view slot='3'>标签三</view><view slot='4'>标签四</view>
</tag>

页面调用JS

// index.js
// 获取应用实例
const app = getApp()Page({data: {show:'none',temp:[{ title: '标签1', meta: 1 },{ title: '标签2', meta: 2 },{ title: '标签3', meta: 3 },{ title: '标签4', meta: 4 },]},changeTab(params){console.log('params',params.detail)},onLoad() {},
})

微信小程序标签页组件相关推荐

A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
微信小程序日历签到组件(原创)
微信小程序日历签到组件(原创) 开发原因: 为满足定制需要,市面上又找不到车子和轮子,干脆自己撸了并开源分享有需要的人用其他说明: 该组件js日期均已使用yyyy/MM/dd格式连接解决ios不兼容 ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈绘制底部圆形及 ...

微信小程序标签页组件

微信小程序标签页组件相关推荐

最新文章

热门文章