更新记录
1.0.0(2024-09-17)
下载此版本
无
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.7.9 app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
<template>
<view>
<wendy-verticalClassification :tabbar="diseaseArr" @swichMenu="swichMenu">
<template #content>
<u-list
v-if="list.length != 0"
:scrollable="false"
class="list"
@scrolltolower="scrolltolower"
>
<u-list-item v-for="(item, index) in list" :key="index">
<u-cell
:title="`${item.contentTitle}`"
@click="gotoDetailFn(item)"
elli
:titleStyle="{
fontWeight: 600,
fontSize: '28rpx',
color: '#383838',
}"
class="item-cell"
>
<view slot="title" class="u-slot-title">
<text class="u-cell-text">{{ item.contentTitle }}</text>
</view>
<u-image
slot="icon"
shape="square"
width="160rpx"
height="100rpx"
value="d"
:src="baseUrl + item.thumbnailPath"
customStyle="margin: -3px 5px -3px 0"
></u-image>
<view slot="label" class="label">
<view>
<view class="bottoms">
<view class="topTitle">
<u-icon
name="tags"
class="icons"
color="#999"
size="15"
></u-icon>
<u--text
type="info"
:text="item.typeText"
size="12"
></u--text>
</view>
<view class="topTitle">
<u-icon
name="eye"
class="icons"
color="#999"
size="15"
></u-icon>
<u--text
type="info"
:text="item.viewcis"
size="12"
></u--text>
</view>
</view>
<view class="time">
<u--text
type="info"
:text="item.updateTime"
size="14"
></u--text>
</view>
</view>
</view>
</u-cell>
</u-list-item>
<u-list-item>
<u-loadmore :status="loadingStatus" />
</u-list-item>
</u-list>
</template>
</wendy-verticalClassification>
</view>
</template>
<script>
export default {
data() {
return {
diseaseArr: [{
dictLabel: "全部",
dictValue: "",
name: "全部",
}],
list:[]
};
},
methods: {
swichMenu(index) {
},
},
};
</script>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: row;
.tab {
min-width: 160rpx;
background: #eee;
height: 100vh;
box-sizing: border-box;
.tab-item {
padding: 20rpx 10rpx;
min-height: 80rpx;
display: flex;
align-content: center;
justify-content: center;
flex-direction: row;
}
.active-tab {
background: #fff;
position: relative;
&::before {
content: "";
width: 4rpx;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgb(63, 171, 189);
}
.label {
color: rgb(63, 171, 189);
}
}
}
.content {
width: 100%;
background: #fff;
}
}
.item-cell {
.u-slot-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
font-weight: 600;
font-size: 28rpx;
color: #383838;
}
.label {
.bottoms {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.topTitle {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
}
}
.time {
margin: 10rpx 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
}
</style>
#