diff --git a/packages/components/side-bar-item/side-bar-item.wxml b/packages/components/side-bar-item/side-bar-item.wxml
index bf6699f7d..a2b6c06de 100644
--- a/packages/components/side-bar-item/side-bar-item.wxml
+++ b/packages/components/side-bar-item/side-bar-item.wxml
@@ -14,8 +14,8 @@
 >
   <block wx:if="{{active}}">
     <view class="{{classPrefix}}__line"></view>
-    <view class="{{classPrefix}}__prefix"></view>
-    <view class="{{classPrefix}}__suffix"></view>
+    <view wx:if="{{!isFirstChild}}" class="{{classPrefix}}__prefix"></view>
+    <view wx:if="{{!isLastChild}}" class="{{classPrefix}}__suffix"></view>
   </block>
   <template wx:if="{{_icon}}" is="icon" data="{{ tClass: classPrefix + '__icon', ..._icon }}" />
   <block wx:if="{{badgeProps}}">
diff --git a/packages/components/side-bar/side-bar.ts b/packages/components/side-bar/side-bar.ts
index a371d9a45..e4c448527 100644
--- a/packages/components/side-bar/side-bar.ts
+++ b/packages/components/side-bar/side-bar.ts
@@ -4,7 +4,6 @@ import props from './props';
 
 const { prefix } = config;
 const name = `${prefix}-side-bar`;
-const relationsPath = '../side-bar-item/side-bar-item';
 
 @wxComponent()
 export default class SideBar extends SuperComponent {
@@ -13,7 +12,7 @@ export default class SideBar extends SuperComponent {
   children = [];
 
   relations: RelationsOptions = {
-    [relationsPath]: {
+    '../side-bar-item/side-bar-item': {
       type: 'child',
       linked(child) {
         this.children.push(child);
@@ -36,8 +35,13 @@ export default class SideBar extends SuperComponent {
 
   observers = {
     value(v) {
-      this.$children.forEach((item) => {
+      const sideBarItems = this.$children;
+      sideBarItems.forEach((item, index) => {
         item.updateActive(v);
+        item.setData({
+          isFirstChild: index === 0,
+          isLastChild: index === sideBarItems.length - 1,
+        });
       });
     },
   };