添加 dynamic-border 动态修改border样式实例

pages.json

@@ -763,6 +763,12 @@
         "navigationBarTitleText": "border属性组合示例"
       }
     },
+    {
+      "path": "pages/CSS/border/dynamic-border",
+      "style": {
+        "navigationBarTitleText": "border动态修改"
+      }
+    },
     {
       "path": "pages/CSS/box-shadow/box-shadow",
       "style": {

pages/CSS/border/dynamic-border.uvue

+<template>
+	<view style="margin: 15px;border-radius: 10px;background-color: white;">
+		<view
+			v-for="(item,index) in 10" :key="index"
+			:class="(index < 9 ? 'bb1' : '') + ' ' + (currentIndex == 0 ? 'btlr10 btrr10' : currentIndex == 9 ? 'bblr10 bbrr10' : '')"
+			style="flex-direction: row;align-items: center;padding: 15px"
+			:style="index == currentIndex ? 'background-color :#57BE6A;' : ''"
+			@tap="currentIndex = index">
+			<view>
+				<text style="font-size: 14px;" :style="index == currentIndex ? 'color: #FFFFFF;' : ''">{{index + 1}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				currentIndex: 0,
+			}
+		}
+	}
+</script>
+
+<style>
+	.bb1{
+		border-bottom: 1rpx solid #EEEEEE;
+	}
+	.btlr10{
+		border-top-left-radius: 10rpx;
+	}
+	.btrr10{
+		border-top-right-radius: 10rpx;
+	}
+	.bblr10{
+		border-bottom-left-radius: 10rpx;
+	}
+	.bbrr10{
+		border-bottom-right-radius: 10rpx;
+	}
+</style>

pages/tabBar/CSS.uvue

@@ -103,6 +103,10 @@
               {
                 name: 'border属性复合示例',
                 url: '/pages/CSS/border/complex-border/complex-border',
+              },
+              {
+                name: 'border动态修改样式',
+                url: '/pages/CSS/border/dynamic-border'
               },
             ] as Page[],
           },