recycapp/pages/question/index.vue

<template> 
		<view class="content">
			<u-tabs :list="tabArr" lineColor="#FB8F0C" @click="tabClick"></u-tabs>
			<view class="problem  " v-if="list.length > 0"> 
				<view class="problem_main">
					<view class="li" v-for="(item,index) in list" :key="index"  @click="show(index)">
						<view class="left frex-start"> 
							<view class="zmLable">Q</view>
							<view class="left_2 rightContent">{{item.name}}</view>
							<!-- <view class="left_1" >	 
								<image v-if="item.is_show==1" class="icon" src="/static/img/up.png" mode=""></image>
								<image v-if="item.is_show==0" class="icon" src="/static/img/down.png" mode=""></image>
							</view> -->  
						</view>
						<view class="frex-start">
							<view class="zmLable">A</view>
							<view class="rightContent">
								<lookMore :content="item.content"></lookMore>
							</view>
						</view>
						<!-- <view class="textBox" @click="getH">
							{{item.content}}
						</view> -->
						<!-- <u-read-more>
							<rich-text :nodes="content" :showHeight="30"></rich-text>
						</u-read-more> -->
						<!-- <u-read-more ref="uReadMore">
								<u-parse :content="item.content" @load="load"></u-parse>
							</u-read-more> -->
						<!-- <view class="left " v-if="item.is_show==1">
							<view class="left_3"><text style="white-space: pre-wrap;line-height: 20px;">{{item.content}}</text></view> 
						</view> -->
					</view>
					<!-- <uni-load-more :status="loadmore" :content-text="contentText" /> -->
				</view>
			</view>
			<uni-load-more :status="loadmore" :content-text="contentText" />
			<view class="zanwuimg" v-if="list.length == 0">
			  <image src="../../static/img/null.png" mode="widthFix"></image>
				<view>暂无相关数据</view>
			</view>  
		</view> 
</template>

<script>
	export default{
		data(){
			return{ 
				list:[],
				ifBottomRefresh:false,
				loadmore: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: ''
				},
				tabArr: [{
					name: '操作规范',
				}, {
					name: '回收问题',
				}, {
					name: '清洗问题'
				}, {
					name: '清运问题'
				}, {
					name: '维修问题'
				}, {
					name: '账户问题'
				}, {
					name: '其他问题'
				}]
			}
		},
		onLoad(e) {
			this.getdata('操作规范')
		},
		onShow() { 
		},
		onReachBottom() {
			this.page += 1 
			if (this.loadmore == 'noMore') return
			this.ifBottomRefresh = true
			this.getData()  
		},
		methods:{ 
			tabClick(val){
				this.list = []
				this.getdata(val.name)
			},
			getH(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.textBox').boundingClientRect(({ height }) => {
				  console.log('square_giant的高度是：' + height + 'px');
				}).exec();
			},
			load() {
				this.$refs.uReadMore.init();
			},
			show(index){
				var list = this.list;
				 list.forEach((item,index2) => {  
					 if(index == index2){
						list[index2].is_show =  item.is_show==1 ? 0: 1;  
					 }
				}) 
				this.list = list;
			},
			getdata(type){
				let data={page:this.page}
				data.platform = 'app'
				data.question_type = type
				this.$api.question_list(data,res=>{ 
					if(res.code == '1'){
						this.list= this.list.concat(res.data.list.data)
						this.loadmore = this.list.length < res.data.list.total ? 'more' : 'noMore' 
					}
				}) 
			}
		}
	}
</script>

<style lang="scss">
page{
	// background: #fff;
	background: rgb(245,245,250);
}
  .content{
	  padding: 20rpx 35rpx;
  }
  .problem{
  	background-color: #fff;
	border-radius: 30rpx;
	padding-top: 15rpx;
	padding-bottom: 17rpx;
  	.problem_main{
  		width: 92%;
  		margin: 0 auto;padding-bottom: 10px;
  
  		.li{ 
  			    padding-top: 20rpx;
  			    border-bottom: 1px solid #eee;
  			.left{
  				overflow: hidden;
  				margin-bottom: 20rpx;
  				.left_1{
  					float: left;
  					height: 4vh;
  					width: 4vh;  
  				}
  				.left_2{
  					font-size: 30rpx;
  					float:left;
  					width: 90%;
  				}
  				.left_3{
  					font-size: 24rpx;
  					float:left;
  					width: 92%;color: #676767;padding-left: 12px;
  				}
  			}
  			 
  		}
  		.li:last-child{
  			border: none;
  		}
  	}
  }
  .articleBox{
  	padding: 29rpx 24rpx 38rpx 35rpx;
  	.articleInfo{
  		display: flex;
  		justify-content: space-between;
  		align-items: flex-start;
  		.articleTitle{
  			margin-top: 10rpx;
  			font-weight: bold;
  			font-size: 30rpx;
  			color: #282F38;
  			width: 350rpx;
  		}
  		img{
  			margin-left: 20rpx;
  		}
  	}
  	.articleData{
  		font-size: 24rpx;
  		color: #999999;
  		margin-top: 36rpx;
  	}
  }
  .zmLable{
	  color: #FB8F0C;
	  font-weight: 800;
	  // margin-right: 15rpx;
	  width: 38rpx;
  }
  .frex-start{
	  display: flex;
	  align-items: center;
  }
  .rightContent{
	  width: calc(100% - 38rpx)
  }
</style>