1. 上下标表示物理单位
效果图:
代码
<view>
<!-- <sup> 标签表示上标; <sub>表示下标 -->
<sup>i</sup>
<sub>imp</sub>
<text>: 25kA</text>
</view>
2.横向滚动
效果图：
代码：
<view class="">
<scroll-view scroll-x="true" class="type-content">
<block v-for="(item, index) in typeList" :key="index">
<view class="type-item">
<view class="type-item-img">
<image :src="item.logo" mode=""></image>
</view>
<view class="type-item-title page f-s-12 c-50 u-flex u-row-center u-col-center">{{item.text}}</view>
</view>
</block>
</scroll-view>
</view>
typeList:[
{
logo:'/static/mall/photos/1.png',
text:'型号类别'
},{
logo:'/static/mall/photos/1.png',
text:'型号类别'
},{
logo:'/static/mall/photos/1.png',
text:'型号类别'
},{
logo:'/static/mall/photos/1.png',
text:'型号类别'
},{
logo:'/static/mall/photos/1.png',
text:'型号类别'
},{
logo:'/static/mall/photos/1.png',
text:'型号类别'
},{
logo:'/static/mall/photos/1.png',
text:'型号类别'
},{
logo:'/static/mall/photos/1.png',
text:'型号类别'
},{
logo:'/static/mall/photos/1.png',
text:'型号类别'
},
],
.type-content {
white-space: nowrap; // 滚动必须加的属性
width: 100%;
height: 270rpx;
padding: 20rpx;
padding-left: 0;
// margin: 0 auto;
.type-item {
width: 200rpx;
margin-right: 20rpx;
display: inline-block;
vertical-align: top;
.type-item-img {
display: inline-block;
image {
width: 200rpx;
height: 200rpx;
border-radius: 6rpx;
}
}
.type-item-title {
display: block; // 让字体换行
width: 200rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
}
}
}
3.长按触发弹窗
效果图：
代码：
<view class="goods_wrap bg-ed u-p u-flex u-flex-wrap u-row-between">
<view class="u-m-b-20 goods_box u-flex-col u-row-between" v-for="(item,index) in goodsList" :key="index"
@longpress.stop="longpressClick(index)">
<view class="goods_box-wrap" @click="navito('/pages/mall/goodsdetail')">
<view class="">
<view class="goods_box_top">
<u-image :src="item.img" width="100%" height="100%" border-radius="12" class="goods_img"></u-image>
<view class="goods_tag flex" :class="item.new ? 'goods_tag_new':''">{{item.new? '新品':'特价'}}</view>
</view>
<view class="u-p-l-20 u-p-r-10 u-m-t-20 f-s-12 c-2C" :class="item.tip !== ''? 'goods_title':''">{{item.title}}</view>
<view class="u-p-l-20 u-p-r-10 u-m-t-20 f-s-12 c-81 goods_title">{{item.tip}}</view>
<view class="u-p-l-20 u-p-r-30 u-m-t-20 u-m-b-30 u-flex u-row-between">
<view class="f-s-12 c-red">￥{{item.price}}</view>
<view class="">
<u-image src="/static/mall/more.png" width="24" height="24"></u-image>
</view>
</view>
</view>
<view class="longpress-popup u-flex-col u-row-center u-col-center" v-if="item.longpressShow" @click.stop="popupClick(index)" >
<view class="longpress-popup-item flex">找相似</view>
<view class="longpress-popup-item flex">找同款</view>
<view class="longpress-popup-item flex">不看此商品</view>
</view>
</view>
</view>
</view>
js代码
// 长按事件
longpressClick(index) {
console.log("触发长按事件");
this.goodsList[index].longpressShow = true;
},
popupClick(index){
console.log("触发长按事件弹窗事件");
this.goodsList[index].longpressShow = false;
},
css代码
.goods_wrap {
// background-color: #ededed;
// padding-bottom: 100rpx;
.goods_box {
width: 48.5%;
// width: 344rpx;
height: 502rpx;
border-radius: 12rpx;
box-shadow: 0 3rpx 4rpx rgba(0,0,0,0.16);
background-color: #fff;
.goods_box-wrap {
position: relative;
.goods_box_top {
width: 344rpx;
height: 314rpx;
position: relative;
border-bottom: 1rpx solid #C4C4C4;
.goods_img {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.goods_tag {
position: absolute;
left: 0;
bottom: 0;
width: 88rpx;
height: 36rpx;
color: #fff;
font-size: 24rpx!important;
background-image: linear-gradient(to right, #FD6C10,rgba($color:#FF9500, $alpha:0.8));
}
.goods_tag_new {
background-image: linear-gradient(to right, #167BEF,rgba($color:#5CD4F9, $alpha:0.8));
}
}
.goods_title {
width: 340rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.longpress-popup {
position: absolute;
top: 0;
left: 0;
width: 344rpx;
height: 502rpx;
border-radius: 12rpx;
background-color: rgba($color: #000000, $alpha: 0.35);
.longpress-popup-item {
width: 304rpx;
height: 72rpx;
border-radius: 44rpx;
background-color: #fff;
margin-bottom: 30rpx;
}
}
}
}
}
