nView tabs标签

最新推荐文章于 2024-06-15 11:46:27 发布

乱锅炖宇宙

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量335

点赞数 9

分类专栏：前端页面文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_73482660/article/details/135536039

版权

前端页面专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了如何在uView2.0版本中使用Tabs标签，展示了如何在uni-app的生态框架下实现列表切换功能，适用于nVue开发。

摘要由CSDN通过智能技术生成

基本使用此处是nView的2.0版本Tabs 标签 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)

<template>
    <u-tabs :list="list1" @click="click"></u-tabs>
</template>

<script>
	export default {
		data() {
			return {
                list1: [{
                    name: '关注',
                }, {
                    name: '推荐',
                }, {
                    name: '电影'
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }]
			}
		},
		methods: {
            click(item) {
                console.log('item', item);
            }
		}
	}
</script>

自己例子修改后记得传的是对象还是数组里的数字

<view class="u-demo-block">
			  <text class="u-demo-block__title">
			    待办事项
			    <text class="total" v-if="total !== null">（{{total}}）</text>
			  </text>
			  <view>
				  
				  	<!-- <view class="u-demo-block__content" style="display: flex;  padding: 8px;">
				  					<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index" >
				  						<u-tag :text="item.text" :plain="!item.checked" type="primary" :name="index" @click="radioClick"
				  							shape="circle"  class="tag-item" >
				  						</u-tag>
				  					<view>
				  					
				  				<view> -->

			    
			      <u-tabs :list="radios" @click="radioClick"></u-tabs>
			   
			  </view>
			</view>

	radios: [{
						click: true,
						name: "全部",
						value: ""
					}, {
						click: false,
						name: "案源登记",
						value: "01"
					},
					{
						click: false,
						name: "案源分流",
						value: "02"
					},
					{
						click: false,
						name: "案源接收",
						value: "03"
					},
					{
						click: false,
						name: "案源核查",
						value: "04"
					},
					{
						click: false,
						name: "案源决定",
						value: "05"
					},
					{
						click: false,
						name: "案源执行",
						value: "06"
					},
					{
						click: false,
						name: "案源归档",
						value: "07"
					}
				],
				radioActive: {
					click: true,
					name: "全部",
					value: ""
				},

radioClick(i) {
				this.radioActive = i;
				this.list = [];
				this.pageNum = 1;
				this.todoList()
			},


//this.radioActive = [i];

	// 待办
			todoList() {
				this.getTodoLoading = true;
				todoList({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					nodeId: this.radioActive.value
				}).then(response => {
					this.isOnLoad = false;
					this.getTodoLoading = false;
					this.total = response.total || 0
					if (response.rows.length > 0) {
						this.pageNum++
						this.list.push(...response.rows.map((d) => {
							if (d.processArr) {
								d.processArr = JSON.parse(d.processArr)
							} else {
								d.processArr = []
							}
							return d
						}))
					}
				})
			},