[每天进步一点点~] uni-app 上下标表示物理单位、横向滚动、长按触发弹窗

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;
                    }
                }
            }
            
        }
        
    }