uni-app条件动态绑定样式

迈不过友情╰ 2022-12-17 07:08 230阅读 0赞

首先我们需要了解实现什么效果,

这里我想实现的效果

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70

图片是否显示, 因为图片是绝对定位, 文本需要缩进行,这里动态绑定是否缩进行

直接看代码吧,不难

  1. <template>
  2.     <view class="yh-list">
  3.         <!--顶部搜索导航栏 S -->
  4.         <uni-nav-bar-classify class="yh-list-nav" background-color="#FFFFFF">
  5.             <view class="nav-left" slot="left" @click="goBack">
  6.                 <image class="go-back" :src="iconGoBack" mode="widthFix"></image>
  7.             </view>
  8.             <view class="input-box-right">
  9.                 <input class="text-input" type="text" :value="hotSearchDefault || '请输入关键字'" />
  10.                 <image class="icon-search" src="@/static/icon/search.png" mode="widthFix"></image>
  11.             </view>
  12.         </uni-nav-bar-classify>
  13.         <!--顶部搜索导航栏 E -->
  14.         <!-- 写入内容 S -->
  15.         <view class="comment">
  16.             <!-- 顶部导航 S -->
  17.             <view class="top-nav">
  18.                 <view class="menu">
  19.                     <block v-for="(item, index) in goodsMenuTop" , :key="index">
  20.                         <view class="menu-list">
  21.                             <view class="left">
  22.                                 {
  23.    {item.title}}
  24.                             </view>
  25.                             <block v-if="index == 0">
  26.                                 <image class="select-image" src="../../../static/icon/icon-select-close.png" mode="widthFix"></image>
  27.                             </block>
  28.                             <block v-if="index == 2">
  29.                                 <image class="select-image" src="../../../static/icon/icon-select-close.png" mode="widthFix"></image>
  30.                             </block>
  31.                         </view>
  32.                     </block>
  33.                     <view class="layout-cut" @click="chooseLayoutCut">
  34.                         <image class="layout-cut-image" src="../../../static/icon/icon-list.png" mode="widthFix"></image>
  35.                     </view>
  36.                 </view>
  37.                 <view class="goods-filtrate">
  38.                     <view class="shaixuan">
  39.                         筛选
  40.                     </view>
  41.                     <image class="filtrate-image" src="../../../static/icon/icon-shaixuan.png" mode="widthFix"></image>
  42.                 </view>
  43.             </view>
  44.             <!-- 顶部导航 E -->
  45.             <block v-if="layoutState != false">
  46.                 <!-- 四宫格布局 S -->
  47.                 <view class="grid-layout">
  48.                     1
  49.                 </view>
  50.                 <!-- 四宫格布局 E -->
  51.             </block>
  52.             <block v-else>
  53.                 <!-- 列表布局 S -->
  54.                 <view class="list-layout">
  55.                     <view class="goods" v-for="(item, index) in goodsList" :key>
  56.                         <view class="goods-cover">
  57.                             <image class="cover-image" :src="item.goods_cover || errorImage" mode=""></image>
  58.                         </view>
  59.                         <view class="goods-info">
  60.                             <view class="goods-name">
  61.                                 <block v-if="item.is_activity != 0">
  62.                                 <image class="goods-activity" src="../../../static/banner/1.jpg" mode=""></image>
  63.                                 </block>
  64.                                 <text class="name" :class="{'text-indent': (item.is_activity != 0)}">{
  65.    {item.goods_name}}</text>
  66.                             </view>
  67.                         </view>
  68.                     </view>
  69.                 </view>
  70.                 <!-- 列表布局 E -->
  71.             </block>
  72.         </view>
  73.         <!-- 写入内容 E -->
  74.     </view>
  75. </template>
  77. <script>
  78.     import uniNavBarClassify from '@/components/uni-nav-bar-classify/uni-nav-bar-classify.vue'
  79.     export default {
  80.         components: {
  81.             uniNavBarClassify
  82.         },
  83.         data() {
  84.             return {
  85.                 iconGoBack: this.$mAssetsPath.iconGoBack,
  86.                 errorImage: this.$mAssetsPath.errorImage,
  87.                 hotSearchDefault: '请输入关键字', // 搜索默认关键字
  88.                 goodsMenuTop: this.$mConstDataConfig.goodsMenuTop, // 商品列表导航菜单
  89.                 layoutState: false, // 显示布局状态默认false
  90.                 goodsList: [
  91.                     {
  92.                         goods_name: "高清镜面, 智能屏显, 9D音效高清镜面, 智能屏显, 9D音效高清镜面, 智能屏显, 9D音效",
  93.                         goods_cover: "",
  94.                         goods_price: 78.00,
  95.                         goods_comment_num: 1000,
  96.                         goods_good_reputation: 93,
  97.                         shop_name: "惠多多专营店",
  98.                         is_advertising: 0,
  99.                         is_activity: 1,
  100.                         is_autotrophy: 0,
  101.                     },
  102.                     {
  103.                         goods_name: "高清镜面, 智能屏显, 9D音效高清镜面, 智能屏显, 9D音效高清镜面, 智能屏显, 9D音效",
  104.                         goods_cover: "",
  105.                         goods_price: 78.00,
  106.                         goods_comment_num: 1000,
  107.                         goods_good_reputation: 93,
  108.                         shop_name: "惠多多专营店",
  109.                         is_advertising: 0,
  110.                         is_activity: 0,
  111.                         is_autotrophy: 0,
  112.                     }
  113.                 ]
  114.             }
  115.         },
  116.         methods: {
  117.             // 返回上一级事件
  118.             goBack() {
  119.                 uni.navigateBack({
  120.                     delta: 1
  121.                 })
  122.             },
  123.             // 布局切换
  124.             chooseLayoutCut() {
  125.                 this.layoutState = !this.layoutState
  126.             }
  127.         }
  128.     }
  129. </script>
  131. <style lang="scss">
  132.     .yh-list {
  133.         width: 100%;
  134.         background-color: #fff;
  135.         display: flex;
  136.         background-color: $color-white;
  137.         /*  #ifdef  APP-PLUS  */
  138.         margin-top: calc(20upx + var(--status-bar-height));
  140.         /*  #endif  */
  142.         .yh-list-nav {
  143.             position: fixed;
  144.             z-index: 99;
  145.             top: 0;
  147.             .nav-left {
  148.                 width: 30px;
  149.                 padding-top: 6px;
  151.                 .go-back {
  152.                     width: 20px;
  153.                 }
  154.             }
  156.             .input-box-right {
  157.                 width: 100%;
  158.                 background-color: #f8f8f8;
  159.                 display: flex;
  160.                 align-items: center;
  161.                 height: 28px;
  162.                 border-radius: 40upx;
  163.                 padding: 0 20upx 0 30upx;
  165.                 .icon-search {
  166.                     width: 22px;
  167.                 }
  169.                 .text-input {
  170.                     width: 100%;
  171.                     font-size: 14px;
  172.                     color: #909399;
  173.                 }
  174.             }
  175.         }
  177.         ,
  178.         // 导航菜单
  179.         .comment {
  180.             width: 100%;
  181.             background-color: #f8f8f8;
  182.             // display: flex;
  183.             height: 100%;
  184.             position: absolute;
  185.             padding-top: 88upx;
  186.             /* #ifdef APP-PLUS */
  187.             padding-top: calc(88upx + var(--status-bar-height));
  188.             /* #endif */
  189.             bottom: 0;
  191.             .top-nav {
  192.                 width: 100%;
  193.                 height: 80upx;
  194.                 background-color: #FFFFFF;
  195.                 display: flex;
  196.                 align-items: center;
  197.                 font-size: $font-sm;
  198.                 box-shadow: 0 1upx 5upx #EEEEEE;
  200.                 .menu {
  201.                     width: 80%;
  202.                     display: flex;
  203.                     align-items: center;
  204.                     justify-content: space-between;
  206.                     .menu-list:nth-child(1),
  207.                     .menu-list:nth-child(3) {
  208.                         width: 180upx;
  209.                         height: 50upx;
  210.                     }
  212.                     .menu-list:nth-child(3) {
  213.                         justify-content: center;
  214.                     }
  216.                     .menu-list {
  217.                         display: flex;
  218.                         align-items: center;
  219.                         justify-content: center;
  221.                         .select-image {
  222.                             width: 35upx;
  223.                         }
  224.                     }
  226.                     .layout-cut {
  227.                         display: flex;
  228.                         align-items: center;
  229.                         margin-right: 28upx;
  230.                     }
  232.                     .layout-cut image {
  233.                         width: 40upx;
  234.                     }
  235.                 }
  237.                 .goods-filtrate {
  238.                     width: 20%;
  239.                     display: flex;
  240.                     align-items: center;
  241.                     justify-content: center;
  242.                     border-left: 1rpx solid #EEEEEE;
  243.                     height: 30upx;
  245.                     .shaixuan {}
  247.                     .filtrate-image {
  248.                         width: 30upx;
  249.                         margin-left: 5upx;
  250.                     }
  251.                 }
  252.             }
  253.             // 商品列表布局
  254.             .list-layout {
  255.                 padding: 20rpx;
  256.                 .goods {
  257.                     display: flex;
  258.                     justify-content: space-between;
  259.                     .goods-cover {
  260.                         width: 300rpx;
  261.                         height: 300rpx;
  262.                         .cover-image {
  263.                             width: 100%;
  264.                             height: 100%;
  265.                         }
  266.                     }
  267.                     .goods-info {
  268.                         width: 392rpx;
  269.                         .goods-name {
  270.                             font-size: $font-base;
  271.                             .goods-activity {
  272.                                 width: 50rpx;
  273.                                 height: 28rpx;
  274.                                 border-radius: 5rpx;
  275.                                 margin-top: 6rpx;
  276.                                 margin-right: 20rpx;
  277.                                 vertical-align: middle;
  278.                                 position: absolute;
  279.                             }
  280.                             .text-indent {
  281.                                 text-indent: 70rpx
  282.                             }
  283.                             .name {
  284.                                 text-overflow: -o-ellipsis-lastline;
  285.                                 overflow: hidden;
  286.                                 text-overflow: ellipsis;
  287.                                 display: -webkit-box;
  288.                                 -webkit-line-clamp: 2;
  289.                                 line-clamp: 2;
  290.                                 -webkit-box-orient: vertical;
  291.                             }
  292.                         }
  293.                     }
  294.                 }
  295.             }
  296.         }
  297.     }
  298. </style>

判断样式主要代码 :class=”{‘text-indent’: (item.is_activity != 0)}“

有什么疑问可下方留言, 如有更好的解决办法,请下方留言,共同学习,谢谢大家支持

发表评论

表情：
评论列表 （有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 动态样式绑定

    1. 简介 本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完

    迈不过友情╰迈不过友情╰/ 0 赞/ 150 阅读

    相关 VUE 样式绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

    蔚落蔚落/ 0 赞/ 461 阅读