zoukankan      html  css  js  c++  java
  • uniapp 关于头部栏目简单切换

    可以直接复制代码,拿到uniapp项目里的新页面测试样式与效果。里面有与只对应的注释。

      1 <template >
      2     <view >
      3         <view class="DDListTop" :style="{'padding-top':paddingtop}">
      4                 <view class="DDListTopList">
      5                     <view class="DDListTopListTab"  >
      6                         
      7                         <!-- 动态绑定数据,包括 样式 -->
      8                         <text :v-model="tabIndex" :style="{'width':tabsWidth+'rpx','height':tabsHeight+'rpx','color':tabIndex==index?activeTxtColor:txtColor}" @click="changeTab(index)"  v-for="(item,index) in tab" :key="index">{{item}}</text>
      9                     </view>
     10                     <view class="DDListTopListLine" :style="{'width':tabsWidth+'rpx','height':'4rpx','margin-left':lineMarginLeft+'rpx'}"></view>
     11                 </view>
     12         </view>
     13         <view class="DDListCon">
     14             
     15             <!-- 循环数组,将对应数据全部填充 tabIndex==1 详情处-->
     16             <view class="DDListConBox" v-if="tabIndex==0"><!-- 当与v-model绑定的数一致时显示,反之隐藏 -->
     17                 <view class="ConList" v-for="(item,index) in dingdan" :key="index" >
     18                     <view class="ConListTop">
     19                         <view class="ConListTopLeft">
     20                             <image :src="item.img" mode=""></image>
     21                         </view>
     22                         <view class="ConListTopRight">
     23                             <view class="ConListTopRightTit">
     24                                 <text>{{item.tit}}</text>
     25                             </view>
     26                             <view class="ConListTopRightNum">
     27                                 <view class="ConListTopRightNumStatus">
     28                                     <text v-if="item.status==1">待付款</text>
     29                                     <text v-if="item.status==2">待发货</text>
     30                                     <text v-if="item.status==3">已发货</text>
     31                                 </view>
     32                                 <view class="ConListTopRightNumPrice">
     33<text>{{item.price}}</text>
     34                                 </view>
     35                                 <view class="ConListTopRightNumAmount">
     36                                     x<text>{{item.num}}</text>
     37                                 </view>
     38                             </view>
     39                         </view>
     40                     </view>
     41                     <view class="ConListBot">
     42                         <view class="ConListBotPrice" v-if="item.status==1">
     43                             <text>待付款:</text><text>¥{{item.price}}</text>
     44                         </view>
     45                         <view class="ConListBotPrice" v-if="item.status==2">
     46                             <text>实付:</text><text>¥{{item.price}}</text>
     47                         </view>
     48                         <view class="ConListBotPrice" v-if="item.status==3">
     49                             <text>实付:</text><text>¥{{item.price}}</text>
     50                         </view>
     51                         <view class="ConListBotRefunt">
     52                             <text v-if="item.status==1">取消订单</text>
     53                             <text v-if="item.status==2 ">申请退款</text>
     54                             <text v-if="item.status==3">申请退款</text>
     55                         </view>
     56                         <view class="ConListBotStatus">
     57                             <text v-if="item.status==1">立即付款</text>
     58                             <text v-if="item.status==2">提醒发货</text>
     59                             <text v-if="item.status==3">查看物流</text>
     60                         </view>
     61                     </view>
     62                 </view>
     63             </view>
     64             
     65             
     66             <!-- 当与v-model绑定的数一致时显示,反之隐藏 -->
     67             <view class="DDListConBox" v-if="tabIndex==1">
     68                 
     69                 <!-- 第二条件,如果显示的数据里面有不属于这个页面的数据同样不显示 -->
     70                 <view class="ConList" v-for="(item,index) in dingdan" :key="index" v-if="item.status==1">
     71                     
     72                     <view class="ConListTop">
     73                         <view class="ConListTopLeft">
     74                             <image :src="item.img" mode=""></image>
     75                         </view>
     76                         <view class="ConListTopRight">
     77                             <view class="ConListTopRightTit">
     78                                 <text>{{item.tit}}</text>
     79                             </view>
     80                             <view class="ConListTopRightNum">
     81                                 <view class="ConListTopRightNumStatus">
     82                                     
     83                                     <!-- 样式选择,根据对应的状态,选择对应的显示内容 -->
     84                                     <text v-if="item.status==1">待付款</text>
     85                                     <text v-if="item.status==2">待发货</text>
     86                                     <text v-if="item.status==3">已发货</text>
     87                                 </view>
     88                                 <view class="ConListTopRightNumPrice">
     89<text>{{item.price}}</text>
     90                                 </view>
     91                                 <view class="ConListTopRightNumAmount">
     92                                     x<text>{{item.num}}</text>
     93                                 </view>
     94                             </view>
     95                         </view>
     96                     </view>
     97                     <view class="ConListBot">
     98                         
     99                         <!-- 样式选择,根据对应的状态,选择对应的显示内容 -->
    100                         <view class="ConListBotPrice" v-if="item.status==1">
    101                             <text>待付款:</text><text>¥{{item.price}}</text>
    102                         </view>
    103                         <view class="ConListBotPrice" v-if="item.status==2">
    104                             <text>实付:</text><text>¥{{item.price}}</text>
    105                         </view>
    106                         <view class="ConListBotPrice" v-if="item.status==3">
    107                             <text>实付:</text><text>¥{{item.price}}</text>
    108                         </view>
    109                         <view class="ConListBotRefunt">
    110                             
    111                             <!-- 样式选择,根据对应的状态,选择对应的显示内容 -->
    112                             <text v-if="item.status==1">取消订单</text>
    113                             <text v-if="item.status==2 ">申请退款</text>
    114                             <text v-if="item.status==3">申请退款</text>
    115                         </view>
    116                         <view class="ConListBotStatus">
    117                             
    118                             <!-- 样式选择,根据对应的状态,选择对应的显示内容 -->
    119                             <text v-if="item.status==1">立即付款</text>
    120                             <text v-if="item.status==2">提醒发货</text>
    121                             <text v-if="item.status==3">查看物流</text>
    122                         </view>
    123                     </view>
    124                 </view>
    125             </view>
    126             <view class="DDListConBox" v-if="tabIndex==2">
    127                 <view class="ConList" v-for="(item,index) in dingdan" :key="index" v-if="item.status==2">
    128                     <view class="ConListTop">
    129                         <view class="ConListTopLeft">
    130                             <image :src="item.img" mode=""></image>
    131                         </view>
    132                         <view class="ConListTopRight">
    133                             <view class="ConListTopRightTit">
    134                                 <text>{{item.tit}}</text>
    135                             </view>
    136                             <view class="ConListTopRightNum">
    137                                 <view class="ConListTopRightNumStatus">
    138                                     <text v-if="item.status==1">待付款</text>
    139                                     <text v-if="item.status==2">待发货</text>
    140                                     <text v-if="item.status==3">已发货</text>
    141                                 </view>
    142                                 <view class="ConListTopRightNumPrice">
    143<text>{{item.price}}</text>
    144                                 </view>
    145                                 <view class="ConListTopRightNumAmount">
    146                                     x<text>{{item.num}}</text>
    147                                 </view>
    148                             </view>
    149                         </view>
    150                     </view>
    151                     <view class="ConListBot">
    152                         <view class="ConListBotPrice" v-if="item.status==1">
    153                             <text>待付款:</text><text>¥{{item.price}}</text>
    154                         </view>
    155                         <view class="ConListBotPrice" v-if="item.status==2">
    156                             <text>实付:</text><text>¥{{item.price}}</text>
    157                         </view>
    158                         <view class="ConListBotPrice" v-if="item.status==3">
    159                             <text>实付:</text><text>¥{{item.price}}</text>
    160                         </view>
    161                         <view class="ConListBotRefunt">
    162                             <text v-if="item.status==1">取消订单</text>
    163                             <text v-if="item.status==2 ">申请退款</text>
    164                             <text v-if="item.status==3">申请退款</text>
    165                         </view>
    166                         <view class="ConListBotStatus">
    167                             <text v-if="item.status==1">立即付款</text>
    168                             <text v-if="item.status==2">提醒发货</text>
    169                             <text v-if="item.status==3">查看物流</text>
    170                         </view>
    171                     </view>
    172                 </view>
    173             </view>
    174             <view class="DDListConBox" v-if="tabIndex==3">
    175                 <view class="ConList" v-for="(item,index) in dingdan" :key="index" v-if="item.status==3">
    176                     <view class="ConListTop">
    177                         <view class="ConListTopLeft">
    178                             <image :src="item.img" mode=""></image>
    179                         </view>
    180                         <view class="ConListTopRight">
    181                             <view class="ConListTopRightTit">
    182                                 <text>{{item.tit}}</text>
    183                             </view>
    184                             <view class="ConListTopRightNum">
    185                                 <view class="ConListTopRightNumStatus">
    186                                     <text v-if="item.status==1">待付款</text>
    187                                     <text v-if="item.status==2">待发货</text>
    188                                     <text v-if="item.status==3">已发货</text>
    189                                 </view>
    190                                 <view class="ConListTopRightNumPrice">
    191<text>{{item.price}}</text>
    192                                 </view>
    193                                 <view class="ConListTopRightNumAmount">
    194                                     x<text>{{item.num}}</text>
    195                                 </view>
    196                             </view>
    197                         </view>
    198                     </view>
    199                     <view class="ConListBot">
    200                         <view class="ConListBotPrice" v-if="item.status==1">
    201                             <text>待付款:</text><text>¥{{item.price}}</text>
    202                         </view>
    203                         <view class="ConListBotPrice" v-if="item.status==2">
    204                             <text>实付:</text><text>¥{{item.price}}</text>
    205                         </view>
    206                         <view class="ConListBotPrice" v-if="item.status==3">
    207                             <text>实付:</text><text>¥{{item.price}}</text>
    208                         </view>
    209                         <view class="ConListBotRefunt">
    210                             <text v-if="item.status==1">取消订单</text>
    211                             <text v-if="item.status==2 ">申请退款</text>
    212                             <text v-if="item.status==3">申请退款</text>
    213                         </view>
    214                         <view class="ConListBotStatus">
    215                             <text v-if="item.status==1">立即付款</text>
    216                             <text v-if="item.status==2">提醒发货</text>
    217                             <text v-if="item.status==3">查看物流</text>
    218                         </view>
    219                     </view>
    220                 </view>
    221             </view>
    222         </view>
    223     </view>
    224 </template>
    225 
    226 <script>
    227     export default {
    228         data() {
    229             return {
    230                 //页面状态栏加导航标题栏的高度
    231                 paddingtop:0,
    232                 
    233                 
    234                 //顶部栏目名称
    235                 tab: ['全部', '待付款', '待发货','已发货'],
    236                 
    237                 //自定义头部栏目的一些动态绑定数据
    238                 tabsWidth:750/4,    //宽度
    239                 tabsHeight:80,    //高度
    240                 lineMarginLeft:0,    //下划线左边距
    241                 tabIndex:0,        //v-model
    242                 txtColor:'#999999',        //文字颜色
    243                 activeTxtColor:'#51AA38',    //选中文字颜色
    244                 
    245                 //模拟的数据
    246                 dingdan:[
    247                     {id:'1',img:'../../static/banner5.png',tit:'商品1',price:'123',num:'1',status:'1'},
    248                     {id:'2',img:'../../static/banner5.png',tit:'商品2',price:'321',num:'2',status:'2'},
    249                     {id:'3',img:'../../static/banner5.png',tit:'商品3',price:'213',num:'3',status:'3'}
    250                 ]
    251             };
    252         },
    253         onLoad:function(){
    254             //(在app.vue页面已经将设备的状态栏信息存入本地,此处拿取即可)
    255             
    256             //下面是获取设备的方法,存入onlaunch方法内即可,这样别的页面onload方法内部可以调取使用
    257             // uni.getSystemInfo({
    258             //     success:function(res){
    259             //         if(res.model.indexOf('iPhone')!== -1){
    260             //             var paddingtop=res.statusBarHeight+44+'px';
    261             //             uni.setStorageSync('paddingtop', paddingtop);
    262             //         }else{
    263             //             var paddingtop=res.statusBarHeight+48+'px';
    264             //             uni.setStorageSync('paddingtop', paddingtop);
    265             //         }
    266             //     }
    267             // })
    268             
    269                this.paddingtop = uni.getStorageSync('paddingtop'); //获取到的设备状态栏的高加导航标题的高
    270         },
    271         methods:{
    272             changeTab(index) {
    273                 //点击tab的栏目,拿取相对应的index,计算得到该栏目的左边距,并将值赋予对应下划线的左边距
    274                 let  nums= Number(index) * Number(this.tabsWidth);
    275                 this.lineMarginLeft=nums;
    276                 this.tabIndex=index;
    277             },
    278         },
    279         components: {
    280         }
    281     }
    282 </script>
    283 
    284 <style lang="scss">
    285     page{
    286         height: 100%;
    287         background-color: #F6F5F5;
    288         
    289     }
    290     .DDListTop{
    291         @extend .WidthAll;
    292         height: 80rpx;
    293         background-color: #FFFFFF;
    294         z-index: 888;
    295         position: fixed;
    296         top: 0;
    297         left: 0;
    298         .DDListTopList{
    299             height: 80rpx;
    300             width: 750rpx;
    301             
    302             .DDListTopListTab{
    303                 display: flex;
    304                 justify-content: center;
    305                 align-items: center;
    306                 text{
    307                     display: flex;
    308                     justify-content: center;
    309                     align-items: center;
    310                     
    311                 }
    312             }
    313             .DDListTopListLine{
    314                 background-color: #51AA38;
    315                 transition: all 0.8s; 
    316             }
    317         }
    318     }
    319 
    320 .DDListCon{
    321     @extend .WidthAll;
    322     height: 100%;
    323     padding-top: 80rpx;
    324     .DDListConBox{
    325     @extend .WidthAll;
    326         .ConList{
    327             @extend .WidthAll;
    328             height: 242rpx;
    329             margin-top: 20rpx;
    330             background-color: #FFFFFF;
    331             @extend .FlexColumnMiddle;
    332             .ConListTop{
    333                 width: 710rpx;
    334                 height: 148rpx;
    335                 margin: 0 auto;
    336                 @extend .FlexMiddleB;
    337                 .ConListTopLeft{
    338                     width: 186rpx;
    339                     height: 148rpx;
    340                     @extend .FlexMiddle;
    341                     image{
    342                         width: 186rpx;
    343                         height: 148rpx;
    344                         @extend .FlexMiddle;
    345                     }
    346                 }
    347                 .ConListTopRight{
    348                     width: 500rpx;
    349                     height: 148rpx;
    350                     @extend .FlexMiddleB;
    351                     .ConListTopRightTit{
    352                         width: 340rpx;
    353                         height: 148rpx;
    354                         font-size: 28rpx;
    355                         color: #333333;
    356                         line-height: 42rpx;
    357                         font-weight: bold;
    358                         text{
    359                             text-align: left;
    360                         }
    361                     }
    362                     .ConListTopRightNum{
    363                         width: 150rpx;
    364                         height: 148rpx;
    365                         font-weight: bold;
    366                         line-height: 42rpx;
    367                         text-align: right;
    368                         &Status{
    369                             font-size: 22rpx;
    370                             color: #FF3C31;
    371                         }
    372                         &Price{
    373                             font-size: 26rpx;
    374                             color: #999999;
    375                         }
    376                         &Amount{
    377                             font-size: 22rpx;
    378                             color: #999999;
    379                         }
    380                     }
    381                 }
    382                 
    383             }
    384             .ConListBot{
    385                 width: 710rpx;
    386                 height: 38rpx;
    387                 margin: 0 auto;
    388                 font-weight: bold;
    389                 @extend .FlexEnd;
    390                 &Price{
    391                     width: 190rpx;
    392                     height: 36rpx;
    393                     @extend .FlexMiddle;
    394                     font-size: 26rpx;
    395                     color: #FF3C31;
    396                     text{
    397                         text-align: center;
    398                     }
    399                 }
    400                 &Refunt{
    401                     @extend .FlexMiddle;
    402                     color: #999999;
    403                     font-size: 20rpx;
    404                     padding: 6rpx 16rpx;
    405                     margin-left: 20rpx;
    406                     border: 1rpx solid #999999;
    407                     border-radius: 4rpx;
    408                 }
    409                 &Status{
    410                     @extend .FlexMiddle;
    411                     color: #FF463C;
    412                     font-size: 20rpx;
    413                     padding: 6rpx 16rpx;
    414                     margin-left: 20rpx;
    415                     border: 1rpx solid #FF3C31;
    416                     border-radius: 4rpx;
    417                 }
    418             }
    419         }
    420     }
    421     
    422 }
    423 </style>
    忍一时,越想越气; 退一步,哎呦我去!
  • 相关阅读:
    JDBC 查询的三大参数 setFetchSize prepareStatement(String sql, int resultSetType, int resultSetConcur)
    有空必看
    SpringMVC 利用AbstractRoutingDataSource实现动态数据源切换
    FusionCharts JavaScript API Column 3D Chart
    FusionCharts JavaScript API
    FusionCharts JavaScript API
    Extjs 继承Ext.Component自定义组件
    eclipse 彻底修改复制后的项目名称
    spring 转换器和格式化
    Eclipse快速生成一个JavaBean类的方法
  • 原文地址:https://www.cnblogs.com/l-ialiu/p/13884901.html
Copyright © 2011-2022 走看看