fix: Swiper component modifies skyline rendering mode (#162)

* feat: swiper change skyline

* fix: components change skyline

* fix: appjson add pages

* fix: Update code format and appid

* fix: Delete cover-image

* fix: update code format

* fix: delete useless function

---------

Co-authored-by: v_guanglwen <[email protected]>

Author: bailin0824

miniprogram/app.json

@@ -44,11 +44,14 @@
         "pages/view/sticky/sticky-section/sticky-section",
         "pages/view/movable-view/movable-view",
         "pages/view/cover-view/cover-view",
+        "pages/view/match-media/match-media",
+        "pages/view/page-container/page-container",
         "pages/view/sticky/sticky",
         "pages/content/text/text",
         "pages/content/icon/icon",
         "pages/content/progress/progress",
         "pages/content/rich-text/rich-text",
+        "pages/content/selection/selection",
         "pages/form/button/button",
         "pages/form/checkbox/checkbox",
         "pages/form/form/form",

miniprogram/components/popup/index.wxss

@@ -7,13 +7,14 @@ root-portal {
 .popup {
   position: absolute;
   bottom: 0;
+  top: 0;
   z-index: 5000;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100vw;
-  height: 200px;
+  /* height: 200px; */
   background: rgba(51, 51, 51, 0.65);
   opacity: 1;
   transform: scale3d(1, 1, 1);

miniprogram/packageComponent/pages/content/progress/progress.json

@@ -1,4 +1,5 @@
 {
     "navigationBarTitleText": "progress",
-    "navigationStyle": "custom"
+    "navigationStyle": "default",
+    "renderer": "webview"
 }

miniprogram/packageComponent/pages/content/progress/progress.wxml

@@ -3,7 +3,6 @@
 
 <view class="container page" data-weui-theme="{{theme}}">
   <template is="head" data="{{title: 'progress'}}"/>
-
   <view class="page-body">
     <view class="page-section page-section-gap">
 

miniprogram/packageComponent/pages/content/rich-text/rich-text.json

@@ -1,4 +1,6 @@
 {
   "navigationBarTitleText": "rich-text",
-  "renderer": "webview"
+  "componentFramework": "glass-easel",
+  "renderer": "skyline",
+  "navigationStyle": "custom"
 }

miniprogram/packageComponent/pages/content/rich-text/rich-text.wxml

@@ -1,14 +1,15 @@
 <import src="../../../../common/head.wxml" />
 <import src="../../../../common/foot.wxml" />
-
+<mp-navigation-bar title="rich-text" back="{{true}}"></mp-navigation-bar>
+<scroll-view class="page-scroll-view" scroll-y type="list">
 <view class="container page" data-weui-theme="{{theme}}">
   <template is="head" data="{{title: 'rich-text'}}"/>
 
   <view class="page-body">
     <view class="page-section">
       <view class="page-section-title">通过HTML String渲染</view>
       <view class="page-content">
-        <scroll-view scroll-y>{{htmlSnip}}</scroll-view>
+        <scroll-view class="page-scroll" scroll-y>{{htmlSnip}}</scroll-view>
         <button type="primary" bindtap="renderHtml">渲染HTML</button>
         <block wx:if="{{renderedByHtml}}">
           <rich-text nodes="{{htmlSnip}}"></rich-text>
@@ -19,7 +20,7 @@
     <view class="page-section">
       <view class="page-section-title">通过节点渲染</view>
       <view class="page-content">
-        <scroll-view scroll-y>{{nodeSnip}}</scroll-view>
+        <scroll-view class="page-scroll" scroll-y>{{nodeSnip}}</scroll-view>
         <button type="primary" bindtap="renderNode">渲染Node</button>
         <block wx:if="{{renderedByNode}}">
           <rich-text nodes="{{nodes}}"></rich-text>
@@ -30,3 +31,4 @@
 
   <template is="foot" />
 </view>
+</scroll-view>

miniprogram/packageComponent/pages/content/rich-text/rich-text.wxss

@@ -1,3 +1,4 @@
+@import "../../../../common/reset.wxss";
 .page-content {
   width: auto;
   margin: 15px 0;
@@ -25,7 +26,7 @@
   width: 5px;
 }
 
-scroll-view {
+.page-scroll {
   height: 325px;
   border: 1px solid #1AAD19;
   white-space: pre;

miniprogram/packageComponent/pages/content/selection/selection.js

@@ -0,0 +1,71 @@
+const htmlSnip =
+`<div class="div_class">
+  <h1>Title</h1>
+  <p class="p">
+    Life is&nbsp;<i>like</i>&nbsp;a box of
+    <b>&nbsp;chocolates</b>.
+  </p>
+</div>
+`
+Page({
+  data: {
+    theme: 'light',
+    disableContextMenu: true,
+    showBtn: false,
+    btnX: 0,
+    btnY: 0,
+    selectedString: '',
+    htmlSnip,
+  },
+  onShareAppMessage() {
+    return {
+      title: 'selection',
+      path: 'packageComponent/pages/content/selection/selection'
+    }
+  },
+  onUnload() {
+    if (wx.offThemeChange) {
+      wx.offThemeChange()
+    }
+  },
+  onLoad() {
+    this.setData({
+      theme: wx.getSystemInfoSync().theme || 'light'
+    })
+
+    if (wx.onThemeChange) {
+      wx.onThemeChange(({theme}) => {
+        this.setData({theme})
+      })
+    }
+  },
+  selectionChangeHandler(e) {
+    const selection = e.detail
+    if (selection.isCollapsed === false) {
+      this.setData({
+        showBtn: true,
+        selectedString: e.detail.selectedString,
+        btnX: e.detail.firstRangeRect.x,
+        btnY: e.detail.firstRangeRect.y,
+      })
+    } else {
+      this.setData({
+        showBtn: false
+      })
+    }
+  },
+  copySelectedString() {
+    wx.setClipboardData({
+      data: this.data.selectedString,
+      success() {
+        wx.getClipboardData({
+          success(res) {
+            wx.showToast({
+              title: `复制成功:${res.data}`
+            })
+          }
+        })
+      }
+    })
+  }
+})

miniprogram/packageComponent/pages/content/selection/selection.json

@@ -0,0 +1,4 @@
+{
+    "navigationBarTitleText": "selection",
+    "renderer": "webview"
+}

miniprogram/packageComponent/pages/content/selection/selection.wxml

@@ -0,0 +1,34 @@
+<import src="../../../../common/head.wxml" />
+<import src="../../../../common/foot.wxml" />
+<view class="container page" data-weui-theme="{{theme}}">
+    <template is="head" data="{{title: 'selection'}}" />
+    <view class="content">
+        <scroll-view class="scroll-area" type="list">
+            <text id="before-text" user-select="{{true}}">在 wx-selection 之前的 text</text>
+            <selection bind:selectionchange="selectionChangeHandler" disable-context-menu="{{false}}">
+                <text id="text-wrap" user-select="{{true}}">
+                    <text id="text-1">2011年1月，微信1.0发布。同年5月，微信2.0语音对讲发布</text>
+                    <text id="text-2">
+                        10月，微信3.0新增摇一摇功能
+                        <text id="text-3">2012年3月，微信用户突破1亿。4月份，微信4.0朋友圈发布</text>
+                    </text>
+                    <text id="text-4">同年7月，微信4.2发布公众平台。2013年8月，微信5.0发布微信支付。</text>
+                </text>
+                <text id="text-wrap2" user-select="{{true}}">2014年9月，企业号发布。同月，发布微信卡包</text>
+                <text id="text-wrap3" user-select="{{false}}">
+                    <text id="text-31" user-select="{{true}}">2015年1月，微信第一条朋友圈广告</text>
+                </text>
+                <view>
+                    <text id="view-text" user-select="{{true}}">2016年1月，企业微信发布，2017年1月，小程序发布</text>
+                </view>
+                <rich-text id="rich-text-1" user-select="{{true}}">rich-text</rich-text>
+                <rich-text id="rich-text-2" user-select="{{true}}" nodes="{{htmlSnip}}"></rich-text>
+            </selection>
+            <text id="before-text" user-select="{{true}}">在 selection 之后的 text</text>
+        </scroll-view>
+    </view>
+    <view class="button" wx:if="{{showBtn}}" bind:tap="copySelectedString" style="top:{{btnY - 50}}px;left:{{btnX}}px">
+        点我复制到系统
+    </view>
+    <template is="foot" />
+</view>