diff --git a/components/segment/index.js b/components/segment/index.js
new file mode 100644
index 0000000..b976c27
--- /dev/null
+++ b/components/segment/index.js
@@ -0,0 +1,27 @@
+// components/segment/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    headerTitles: Array,
+    selectedTitle: Number
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    bindtap: function (e) {
+      const { item } = e.currentTarget.dataset
+      this.triggerEvent('tapSegment', item)
+    },
+  }
+})
diff --git a/components/segment/index.json b/components/segment/index.json
new file mode 100644
index 0000000..e8cfaaf
--- /dev/null
+++ b/components/segment/index.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/components/segment/index.wxml b/components/segment/index.wxml
new file mode 100644
index 0000000..038b1f4
--- /dev/null
+++ b/components/segment/index.wxml
@@ -0,0 +1,16 @@
+<!--components/segment/index.wxml-->
+<view class="main">
+  <scroll-view scroll-x scroll-into-view=''>
+    <view class="header-titles">
+      <block wx:for="{{headerTitles}}" wx:key="index" >
+        <view class="item-title">
+          <view id="{{index}}" bindtap="bindtap" data-item="{{index}}" class="title {{index==selectedTitle ? 'title-selected' : ''}}">
+            {{item}}
+          </view>
+          <view class="select-line" hidden="{{index==selectedTitle ? false : true}}"></view>
+        </view>
+      </block>
+    </view>
+  </scroll-view>
+</view>
+
diff --git a/components/segment/index.wxss b/components/segment/index.wxss
new file mode 100644
index 0000000..c8cecf4
--- /dev/null
+++ b/components/segment/index.wxss
@@ -0,0 +1,42 @@
+/* components/segment/index.wxss */
+.header-titles {
+  height: 36px;
+  display: flex;
+  /* justify-content: space-around; */
+  padding: 5px;
+}
+.title {
+  width: 150rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999999;
+  font-size: 14px;
+  margin-top: 5px;
+}
+.item-title{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title-selected {
+  font-size: 16px;
+  color: #292E3E;
+}
+.select-line{
+  margin-top: 4px;
+  width: 10px;
+  height: 2px;
+  border-radius: 5px;
+  background-color: #FA4646;
+}
+
+.main{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 90rpx;
+  color: white;
+}
\ No newline at end of file