diff --git a/examples/mini-program-example/src/pages/api/device/accelerometer/index.tsx b/examples/mini-program-example/src/pages/api/device/accelerometer/index.tsx
index 26b735891a80..8369df8244be 100644
--- a/examples/mini-program-example/src/pages/api/device/accelerometer/index.tsx
+++ b/examples/mini-program-example/src/pages/api/device/accelerometer/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
+import ButtonList from '@/components/buttonList'
 import { TestConsole } from '@/util/util'
 import './index.scss'
 
@@ -52,16 +53,10 @@ export default class Index extends React.Component {
   }
 
   render() {
+    const { list } = this.state
     return (
       <View className='api-page'>
-        {this.state.list.map((item) => {
-          return (
-            <View key={item.id} className='api-page-btn' onClick={item.func == null ? () => {} : item.func}>
-              {item.id}
-              {item.func == null && <Text className='navigator-state tag'>未创建Demo</Text>}
-            </View>
-          )
-        })}
+        <ButtonList buttonList={list} />
       </View>
     )
   }
diff --git a/examples/mini-program-example/src/pages/api/device/network/index.tsx b/examples/mini-program-example/src/pages/api/device/network/index.tsx
index 19f15d26986e..a1b2560e5ae8 100644
--- a/examples/mini-program-example/src/pages/api/device/network/index.tsx
+++ b/examples/mini-program-example/src/pages/api/device/network/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
+import ButtonList from '@/components/buttonList'
 import { TestConsole } from '@/util/util'
 import './index.scss'
 
@@ -85,14 +86,7 @@ export default class Index extends React.Component {
           <View hidden={networkState == null ? false : true}>网络状态：未获取</View>
           <View hidden={networkState == null ? true : false}>网络状态：{networkState ? '已连接' : '已断开'}</View>
         </View>
-        {list.map((item) => {
-          return (
-            <View key={item.id} className='api-page-btn' onClick={item.func == null ? () => {} : item.func}>
-              {item.id}
-              {item.func == null && <Text className='navigator-state tag'>未创建Demo</Text>}
-            </View>
-          )
-        })}
+        <ButtonList buttonList={list} />
       </View>
     )
   }
diff --git a/examples/mini-program-example/src/pages/api/device/wifi/index.tsx b/examples/mini-program-example/src/pages/api/device/wifi/index.tsx
index 625183020c3f..de7576cff9ce 100644
--- a/examples/mini-program-example/src/pages/api/device/wifi/index.tsx
+++ b/examples/mini-program-example/src/pages/api/device/wifi/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { View, Text, ScrollView } from '@tarojs/components'
+import ButtonList from '@/components/buttonList'
 import { TestConsole } from '@/util/util'
 import './index.scss'
 
@@ -204,14 +205,7 @@ export default class Index extends React.Component {
             })}
           </ScrollView>
         </View>
-        {list.map((item) => {
-          return (
-            <View key={item.id} className='api-page-btn' onClick={item.func == null ? () => {} : item.func}>
-              {item.id}
-              {item.func == null && <Text className='navigator-state tag'>未创建Demo</Text>}
-            </View>
-          )
-        })}
+        <ButtonList buttonList={list} />
       </View>
     )
   }
diff --git a/examples/mini-program-example/src/pages/api/interface/interaction/index.tsx b/examples/mini-program-example/src/pages/api/interface/interaction/index.tsx
index cd8345c83c1b..08ca05dc8192 100644
--- a/examples/mini-program-example/src/pages/api/interface/interaction/index.tsx
+++ b/examples/mini-program-example/src/pages/api/interface/interaction/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
+import ButtonList from '@/components/buttonList'
 import { TestConsole } from '@/util/util'
 import './index.scss'
 
@@ -170,16 +171,10 @@ export default class Index extends React.Component {
     ],
   }
   render() {
+    const { list } = this.state
     return (
       <View className='api-page'>
-        {this.state.list.map((item) => {
-          return (
-            <View key={item.id} className='api-page-btn' onClick={item.func == null ? () => {} : item.func}>
-              <Text>{item.id}</Text>
-              {item.func == null && <Text className='navigator-state tag'>未创建Demo</Text>}
-            </View>
-          )
-        })}
+        <ButtonList buttonList={list} />
       </View>
     )
   }