修改uni-app项目中swiper-list-nvue/swiper-page.nvue 如下
<template>
<view class="uni-swiper-page">
<list ref="list" class="list" :offset-accuracy="5" :bounce="false" fixFreezing="true">
<cell v-for="(info, index) in dataList" :key="info.id" :ref="'item'+index">
<view class="hs-goods-div-item-h list-item">
<image class="hs-goods-div-img__3" :src="info.img" mode="scaleToFill"></image>
<view class="hs-goods-row-right__3">
<view class="hs-good-div-titlediv">
<text class="hs-goods-div-title__2"
space="ensp"> 商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</text>
<image src="/static/pt-jd.png" class="hs-goods-div-title-logo" mode="heightFix"></image>
</view>
<view class="hs-goods-div-quan"></view>
<view class="flex-1"></view>
<view class="flex-h flex-align-e">
<text class="hs-goods-div-yuan-name">券后</text>
<text class="hs-goods-div-yuan__1" space="nbsp"> ¥ </text>
<text class="hs-goods-div-price__1">{{info.price}} </text>
<text class="hs-goods-div-old-price__2">¥ 330</text>
</view>
<view class="height30"></view>
<view class="flex-h flex-align-c flex-justify-be">
<text class="hs-goods-div-shop-name">官方旗舰店</text>
<text class="hs-goods-div-vol__2">月销1.6万</text>
</view>
</view>
</view>
</cell>
<cell class="loading"></cell>
</list>
</view>
</template>
<script>
export default {
props: {
pid: {
type: [Number, String],
default: ''
},
parentId: {
type: String,
default: ''
}
},
data() {
return {
scrollable: true,
dataList: [],
goods: {
img: 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/7aec54e736d12f2e78d02dfb44c2d56284356850.jpg',
quanzhi: 10,
price: 158,
commission: 2,
goodsInfo: {
id: ''
}
}
}
},
created() {
for (var i = 0; i < 30; i++) {
this.dataList.push({
id: i,
img: 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/7aec54e736d12f2e78d02dfb44c2d56284356850.jpg',
quanzhi: 10,
price: 158,
commission: 2,
goodsInfo: {
id: ''
}
});
}
},
methods: {
setScrollRef(height) {
if (this.$refs['list'].setSpecialEffects) {
this.$refs['list'].setSpecialEffects({
id: this.parentId,
headerHeight: 1750
});
}
},
loadData() {
// 首次激活时被调用
},
clear() {
// 释放数据时被调用，参考 swiper-list 缓存配置
this.dataList.length = 0;
}
}
}
</script>
<style lang="scss" scoped>
// @import '@/common/hs.css';
@import '../../../common/hs.css';
$text-red:#F40B0E; //文字红色
$uni-border-radius-12: 12rpx;
$uni-color-white: #FFF;
$uni-color-14: #141414;
.height30 {
height: 30rpx;
}
.height26 {
height: 26rpx;
}
.height28 {
height: 28rpx;
}
.height6 {
height: 6rpx;
}
.min-red-yuan-text {
font-size: 20rpx;
line-height: 28rpx;
color: $text-red;
// height: 32rpx;
// padding-top: 12rpx;
margin-right: 4rpx;
}
.row-big-red-price {
font-size: 32rpx;
line-height: 32rpx;
font-weight: 700;
color: $text-red;
}
.row-big-red-price-sub {
font-size: 24rpx;
line-height: 26rpx;
font-weight: 700;
color: $text-red;
}
.hs-goods-div-title-logo {
position: absolute;
top: 4rpx;
left: 0;
height: 28rpx;
}
.hs-goods-div-rowcenter {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
}
.hs-goods-div-item-h {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: stretch;
}
.hs-goods-div-yuan-name {
font-size: 24rpx;
font-weight: bold;
line-height: 26rpx;
color: $text-red;
// text-align: end;
}
.hs-goods-div-yuan__1 {
color: $uni-color-14;
font-size: 20rpx;
font-weight: bold;
line-height: 26rpx;
// text-align: end;
color: $text-red;
}
.hs-goods-div-price__1 {
font-size: 26rpx;
font-weight: bold;
line-height: 26rpx;
// text-align: end;
color: $text-red;
}
.hs-goods-div-title__2 {
/* #ifdef APP-NVUE */
lines: 2;
/* #endif */
/* #ifndef APP-NVUE */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* #endif */
text-overflow: ellipsis; //这是让文本溢出后，显示成省略号。
height: 72rpx; //这里不给高度会导致flex：1出现高度误差(因为text初始高度只有一行)
line-height: 36rpx;
font-size: 28rpx;
color: #171717;
font-weight: 500;
}
.hs-goods-div-quan {
height: 70rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding-bottom: 4rpx;
}
.hs-goods-div-old-price__2 {
font-size: 22rpx;
line-height: 22rpx;
color: #949494;
text-decoration: line-through;
}
.hs-goods-div-vol__2 {
font-size: 22rpx;
line-height: 22rpx;
color: #949494;
padding-right: 20rpx;
}
.heght16 {
height: 16rpx;
}
//-------------style 3 -----------------
.hs-goods-div-img__3 {
width: 228rpx;
height: 228rpx;
border-radius: 12rpx;
margin-right: 16rpx;
}
.hs-goods-row-right__3 {
height: 228rpx;
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: stretch;
padding-top: 4rpx;
padding-bottom: 4rpx;
}
.hs-goods-div-shop-name {
font-size: 22rpx;
line-height: 22rpx;
color: #989898;
}
.uni-swiper-page {
flex: 1;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.list {
flex: 1;
/* background-color: #ebebeb; */
}
.list-item {
margin-left: 24rpx;
margin-right: 24rpx;
margin-top: 20rpx;
padding-top: 14rpx;
padding-right: 18rpx;
padding-bottom: 18rpx;
padding-left: 16rpx;
background-color: #fff;
border-radius: 20rpx;
}
.loading {
height: 20px;
}
</style>hs.css 代码如下：
.flex-v {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.flex-h {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.flex-orient-v {
flex-direction: column;
}
.flex-orient-h {
flex-direction: row;
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.flex-3 {
flex: 3;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-align-c {
align-items: center;
}
.flex-align-s {
align-items: flex-start;
}
.flex-align-e {
align-items: flex-end;
}
.flex-align-b {
align-items: flex-end;
}
.flex-align-str {
align-items: stretch;
}
.flex-justify-s {
justify-content: flex-start;
}
.flex-justify-e {
justify-content: flex-end;
}
.flex-justify-c {
justify-content: center;
}
.flex-justify-be {
justify-content: space-between;
}
.flex-justify-a {
justify-content: space-around;
}
1***@qq.com
牛批666
2021-09-06 15:03