feat(CapsuleBar): 新增 CapsuleBar 组件

Author: juzi214032

commitlint.config.js

@@ -64,7 +64,8 @@ module.exports = {
         'Counter',
         'SearchBar',
         'IndexList',
-        'Behavior'
+        'Behavior',
+        'CapsuleBar'
       ]
     ]
   }

examples/app.json

@@ -83,7 +83,8 @@
         "pages/tabs/index",
         "pages/tabbar/index",
         "pages/combined-tabs/index",
-        "pages/segment/index"
+        "pages/segment/index",
+        "pages/capsule-bar/index"
       ]
     },
     {
@@ -140,4 +141,4 @@
     "content-card": "/components/content-card/index"
   },
   "sitemapLocation": "sitemap.json"
-}
+}

examples/pages/components/nav/pages/capsule-bar/bg.png

@@ -0,0 +1,77 @@
+import navigationBarUtil from '../../../../../dist/navigation-bar/navigation-bar-util';
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // Star 数量
+    starCount: null
+  },
+
+  onLoad(query) {
+    this.getStarCount()
+  },
+
+  onShareAppMessage: function () {
+
+  },
+
+  /**
+   * 获取 Star 数量，有些网络无法访问，暂时不用
+   */
+  getStarCount() {
+    const that = this
+    wx.request({
+      url: 'https://api.github.com/repos/TaleLin/lin-ui',
+      success(res) {
+        let starCount = res.data.stargazers_count
+        starCount = (starCount / 1000).toFixed(1)
+        that.setData({starCount})
+      }
+    })
+  },
+
+  /**
+   * 监听：长按左侧按钮
+   */
+  onLongPressLeft() {
+    wx.vibrateShort()
+    wx.showModal({
+      title: '提示',
+      content: '长按左侧按钮事件被触发'
+    })
+  },
+
+  /**
+   * 监听：长按右侧按钮
+   */
+  onLongPressRight() {
+    wx.vibrateShort()
+    wx.showModal({
+      title: '提示',
+      content: '长按右侧按钮事件被触发'
+    })
+  },
+
+  /**
+   * 监听：点击 Star 卡片
+   */
+  onTapStarCard() {
+    wx.vibrateShort()
+    wx.setClipboardData({
+      data: 'https://github.com/TaleLin/lin-ui'
+    })
+  },
+
+  /**
+   * 监听：点击公众号卡片
+   */
+  onTapPublicCard() {
+    wx.vibrateShort()
+    wx.setClipboardData({
+      data: '林间有风'
+    })
+  }
+})

examples/pages/components/nav/pages/capsule-bar/download.png

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "l-capsule-bar":"/dist/capsule-bar/index"
+  },
+  "navigationStyle":"custom",
+  "navigationBarTextStyle":"white"
+}

examples/pages/components/nav/pages/capsule-bar/index.js

@@ -0,0 +1,41 @@
+<l-capsule-bar catch:linrightlongpress="onLongPressRight"
+                  catch:linleftlongpress="onLongPressLeft"
+                  capsule-color="white"
+                  title-color="white"
+                  bg-color="#3963bc"
+                  home-page='/pages/navigator/index/index'
+                  title="林间有风">
+  <image src="bg.png" class="background-head"></image>
+  <view class="text-head">
+    <view>顶部左侧胶囊按钮可返回上一页和首页</view>
+    <view>长按胶囊按钮可以触发相应事件</view>
+  </view>
+
+  <view class="body-container">
+    <view class="navigation-bar-text">胶囊栏组件适合页面顶部有背景图片的情况下使用，同时会在左侧添加用于返回上一页面和首页的按钮。</view>
+    <view class="center-container">
+      <view class="center-card" catch:tap="onTapStarCard">
+        <view class="center-card-icon-wrapper">
+          <image style="width: 44rpx;height: 42rpx" src="star.png"></image>
+          <view>1.6 K</view>
+        </view>
+        <view class="center-card-detail">
+          你的每一颗 Star 都是我们持续更新的动力，点击复制 Github 链接，为我们点亮那颗支撑我们前行的星星！
+        </view>
+      </view>
+      <view class="center-card">
+        <view class="center-card-icon-wrapper">
+          <image style="width: 44rpx;height: 44rpx" src="download.png"></image>
+          <view>14 K</view>
+        </view>
+        <view class="center-card-detail">
+          Lin UI 迄今为止已拥有 14 K 的下载量，并经过长达 2 年时间的打磨，稳定性和易用性都已达到前所未有的水平。
+        </view>
+      </view>
+    </view>
+
+    <view catch:tap="onTapPublicCard" class="bottom-container">
+      <image style="width: 538rpx;height: 278rpx" src="qrcode.png"></image>
+    </view>
+  </view>
+</l-capsule-bar>

examples/pages/components/nav/pages/capsule-bar/index.json

@@ -0,0 +1,101 @@
+page{
+  background-color: #f5f6fa;
+}
+
+.background-head{
+  width: 100%;
+  height: 232rpx;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -9;
+}
+
+.text-head{
+  font-size:32rpx;
+  line-height:58rpx;
+  color:rgba(255,255,255,1);
+  margin-top: 20rpx;
+  margin-bottom: 20rpx;
+  margin-left: 32rpx;
+}
+
+.body-container{
+  width:100%;
+  padding: 60rpx;
+  box-sizing: border-box;
+  background:linear-gradient(180deg,rgba(232,237,244,1) 0%,rgba(245,246,250,1) 5%,rgba(245,246,250,1) 100%);
+  opacity:1;
+  border-radius:30rpx 30rpx 0px 0px;
+  display: flex;
+  flex-direction: column;
+}
+
+.navigation-bar-text{
+  width:628rpx;
+  background:rgba(255,255,255,1);
+  box-shadow:0px 2rpx 12rpx rgba(0,0,0,0.02);
+  border-radius:20rpx;
+
+  font-size:28rpx;
+  line-height:40rpx;
+  color:rgba(0,0,0,1);
+  letter-spacing:6rpx;
+
+  padding: 30rpx;
+  box-sizing: border-box;
+  text-align: justify;
+  margin-bottom: 60rpx;
+}
+
+.center-container{
+  display: flex;
+}
+
+.center-card{
+  width:272rpx;
+  background:rgba(255,255,255,1);
+  box-shadow:0px 2rpx 12rpx rgba(0,0,0,0.02);
+  border-radius:20rpx;
+  padding: 26rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.center-card:not(:last-child){
+  margin-right: 84rpx;
+}
+
+.center-card-icon-wrapper{
+  display: flex;
+  align-items: center;
+}
+
+.center-card-icon-wrapper>view{
+  font-size:28rpx;
+  line-height:1;
+  color:rgba(0,0,0,1);
+  letter-spacing:2rpx;
+  margin-left: 16rpx;
+}
+
+.center-card-detail{
+  margin-top: 40rpx;
+  font-size:24rpx;
+  line-height:40rpx;
+  color:rgba(0,0,0,1);
+  text-align: justify;
+}
+
+.bottom-container{
+  margin-top: 60rpx;
+  width:628rpx;
+  height:316rpx;
+  background:rgba(255,255,255,1);
+  box-shadow:0px 2rpx 12rpx rgba(0,0,0,0.02);
+  border-radius:20rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}