小程序中数据列表切换组件（小程序中数据列表切换组件是什么）

小程序中数据列表切换组件（小程序中数据列表切换组件是什么）

页面效果

页面显示的列对应数组tags，若tags数组长度为2，则显示两列

引用页面----activity_list

index.wxml

进行中活动 已结束活动 待评价活动

**index.json

{ "usingComponents": { "PagingView": "/components/PagingView/index" }, "navigationBarTitleText": "活动管理"}

index.js

组件 components/PagingView

index.wxml

{{item.name}}

index.json

{ "component": true, "usingComponents": {}}

index.js

Component({ properties: { tags:{ type:Array, value:"表头信息" }, selectedone: { type: Number, value: "表头信息" }, }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { fnclick(e) { // 调用父组件 事件 this.triggerEvent("fnClick", e); }, }})

index.wxss

Page{ font-size: 28rpx;}.header{ background: #fff; width: 100%; border-bottom: 1rpx solid #d9d9d9; position: relative;}.header .list view{ line-height: 88rpx; display: inline-block; text-align: center;color: #999;}.header .list view.blue{ color: #007aff;}.header .cur{ position: absolute; left:0%; transform: translateX(-50%); bottom: 0; width: 100rpx; height: 6rpx; background: #007aff; transition: .5s all;}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。