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

1. 上下标表示物理单位

效果图:

代码

  i
  imp
  : 25kA

2.横向滚动

效果图：

代码：

                        
                            
                                
                                    
                                        
                                            
                                        
                                        {{item.text}}
                                    
                                
                            
                        

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.长按触发弹窗

效果图：

代码：

       
           
               
                   
                       
                           
                           {{item.new? '新品':'特价'}}
                       
                       {{item.title}}
                       {{item.tip}}
                       
                           ￥{{item.price}}
                           
                               
                           
                       
                   
                   
                       找相似
                       找同款
                       不看此商品
                   
               
           
       

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