hbj_app/pages/mine/question/question.vue

<template>
	<view>
		<!-- 自定义导航栏 -->
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="问题咨询" :autoBack="true">
			<!-- <view slot="right" @click="applyWork"><u-icon name="plus-circle" color="#2979ff" size="26"></u-icon></view> -->
			<view slot="right" style="display: flex;" @click="gotoHistory">
				<svgImage name="history" width="50rpx" height="50rpx"></svgImage>
			</view>
		</u-navbar>
		<!-- 问题列表 -->
		<view style="height: calc(100vh - 120px);">
			<view style="font-weight: 600;font-size: 32rpx;">快捷反馈</view>
			<u-tabs :list="list1" @change="clicktabs" :current="tabIndex" lineWidth="30"
				style="background-color: #fff;"></u-tabs>
			<!-- 列表数组 -->
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in 10" :key="index">
					<u-cell :title="`问题${index + 1}`" @click="gotoDetail(item)">
						<u-icon name="arrow-right" slot="icon" color="#606266" size="20"></u-icon>
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		<view class="question" @click="gotoForm">
			我要咨询
		</view>
	</view>
</template>

<script>
	import {
		svgImage
	} from "@/components/svgImage/svgImage.vue"
	export default {
		data() {
			return {
				tabIndex: 0,
				list1: [{
					name: '热门问题',
				}, {
					name: '故障',
				}, {
					name: '密码'
				}, {
					name: '管理员'
				}, {
					name: '普通人员'
				}, {
					name: '操作问题'
				}],
				indexList: []
			}
		},
		methods: {
			// 进入问题详情界面
			gotoDetail(item) {
				this.$tab.navigateTo(`/pages/mine/question/detail/detail?item=${item}`)
			},
			// tabs点击切换
			clicktabs(e) {
				this.switchTab(e.index);
			},
			// 轮播图切换
			tabChange(e) {
				let index = e.target.current || e.detail.current; // 获取到当前移动到第几个
				this.switchTab(index);
			},
			//优化---当index相同时，不执行代码
			switchTab(index) {
				if (this.tabIndex == index) {
					return;
				} else {
					this.tabIndex = index;
				}
			},
			// 跳转问题反馈页面
			gotoForm() {
				this.$tab.navigateTo("/pages/mine/question/questionForm/questionForm")
			},
			// 跳转历史
			gotoHistory() {
				this.$tab.navigateTo('/pages/mine/question/historyQuestion/historyQuestion')
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
		padding: 20rpx;

		/deep/.u-cell__body__content {
			flex-direction: row-reverse;

		}

		.question {
			position: relative;
			height: 80rpx;
			line-height: 80rpx;
			bottom: 20rpx;
			width: 80%;
			background-color: #7de6fb;
			text-align: center;
			margin: auto;
			border-radius: 50rpx;
			color: #fff;
			font-size: 30rpx;
		}
	}
</style>