uniapp 电脑手机响应式处理思路,电脑端左右分布,左边列表,右边内容,点击左边右边内容变化。手机端增加内容也,点击列进入内容也
<view class="row list-half-row">
<view class="el-col-xs-24 el-col-lg-12">
<view class="panel ht-panel news-panel"> <!-- 9.10 news-panel 样式 -->
<scroll-view class="ht-panel-scroll" scroll-y="true" lower-threshold="30" @scrolltolower="scrollLower">
<view @click="goShow(item)" class="news-list" v-for="item in tableList">
<view class="news-list-title">赛事标题赛事标题赛事标题赛事标题赛事标题赛事标题赛事标题</view>
<view class="news-list-body flex-center">
<view class="news-pic">
<image src="../../static/img/m-ucenter_bg.jpg" mode=""></image>
</view>
<view class="flex_bd">
<view class="list-desc">赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介赛事资讯简介</view>
<view class="list-time">2021-04-29</view>
</view>
</view>
</view>
<view class="load-more-box"><uni-load-more :status="status"></uni-load-more></view>
</scroll-view>
</view>
</view>
<view class="el-col-xs-24 el-col-lg-12 el-col-nr-hide">
<view class="panel ht-panel news-content-panel"> <!-- 9.10 news-content-panel 样式 -->
<scroll-view class="ht-panel-scroll" >
<view class="art-content">
<view class="art-heading">
<view class="art-title">赛事标题赛事标题赛事标题赛事标题赛事标题赛事标题赛事标题</view>
<view class="art-meta flex-center">
<view class="item">赛事资讯</view><view class="time">2021-04-29 01:34:57</view>
</view>
</view>
<view class="art-body">
<p>Football是目前亚洲区首创的运动投资型公司,不同于一般市场上的运动投资基金。都是交给专业经理人去掌控您的损利,而是由会员本身去操作您的获利。</p>
<p>本公司主要经营项目以足球为主,与英国知名的合法交易所合作,经过多年的研发,概念革命性地颠覆了传统运动市场集合了机率及统计学概论,让足球项目不单单只是博弈,也可以是一种投资工具,进行比股票与基金更稳健的操作模式。</p>
<p>Football是目前亚洲区首创的运动投资型公司,不同于一般市场上的运动投资基金。都是交给专业经理人去掌控您的损利,而是由会员本身去操作您的获利。</p>
<p>本公司主要经营项目以足球为主,与英国知名的合法交易所合作,经过多年的研发,概念革命性地颠覆了传统运动市场集合了机率及统计学概论,让足球项目不单单只是博弈,也可以是一种投资工具,进行比股票与基金更稳健的操作模式。Football是目前亚洲区首创的运动投资型公司,不同于一般市场上的运动投资基金。都是交给专业经理人去掌控您的损利,而是由会员本身去操作您的获利。</p>
<p>本公司主要经营项目以足球为主,与英国知名的合法交易所合作,经过多年的研发,概念革命性地颠覆了传统运动市场集合了机率及统计学概论,让足球项目不单单只是博弈,也可以是一种投资工具,进行比股票与基金更稳健的操作模式。</p>
</view>
</view>
</scroll-view>
</view>
</view>
onLoad() {
uni.onWindowResize((res) => {
this.Width = res.size.windowWidth
})
},
// 跳转 判断宽屏,手机。跳转还是当前页
goShow(index){
var _this = this
uni.getSystemInfo({
success: function (res) {
_this.Width = res.windowWidth
console.log(res.windowWidth)
}
});
if(this.Width >=1200){
console.log(index)
uni.showToast({
icon:'none',
title:'id:'+index
})
}else{
uni.navigateTo({
url: '/pages/gameNews/newsDetail'
});
}
}