init

xhs-mini-demos/component-case/text/templates.js

@@ -0,0 +1,23 @@
+/** 以下内容为自动生成，请勿手动修改 */
+
+module.exports = {
+  data: {
+    page_data_0: false,
+
+    page_data_1: ``,
+
+    page_data_2: false,
+  },
+
+  page_fun_0(e) {
+    this.setData("page_data_0", e.detail.value);
+  },
+
+  page_fun_1(e) {
+    this.setData("page_data_1", e.detail.value);
+  },
+
+  page_fun_2(e) {
+    this.setData("page_data_2", e.detail.value);
+  },
+};

xhs-mini-demos/component-case/text/templates.xhsml

@@ -0,0 +1,55 @@
+<!-- 以下内容为自动生成，请勿手动修改 -->
+
+<view class="container">
+  <showbox title="text演示">
+    <box>
+      <view class="_ui-space">
+        <view>
+          <text
+            user-select="{{page_data_0}}"
+            space="{{page_data_1}}"
+            decode="{{page_data_2}}"
+          >
+            这是 一段 测试 文字
+          </text>
+        </view>
+
+        <view class="_dflex _jc_space-between">
+          <view class="_dflex _ai_center">
+            <text>是否开启userSelect</text>
+          </view>
+          <switch
+            checked="{{page_data_0}}"
+            color="rgba(255, 36, 66, 1)"
+            bindchange="page_fun_0"
+          />
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>space</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_1}}"
+              placeholder="space"
+              type="text"
+              bindinput="page_fun_1"
+            />
+          </view>
+        </view>
+
+        <view class="_dflex _jc_space-between">
+          <view class="_dflex _ai_center">
+            <text>是否开启decode</text>
+          </view>
+          <switch
+            checked="{{page_data_2}}"
+            color="rgba(255, 36, 66, 1)"
+            bindchange="page_fun_2"
+          />
+        </view>
+      </view>
+    </box>
+  </showbox>
+</view>

xhs-mini-demos/component-case/text/text.css

@@ -0,0 +1,22 @@
+@import '../../common/global.css';
+
+button{
+  margin: 20px 0;
+}
+.text-box-f{
+  margin-bottom: 35px;
+  padding: 20px 0;
+  display: flex;
+  min-height: 150px;
+  background-color: #FFFFFF;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size: 15px;
+  color: #353535;
+  line-height: 2em;
+}
+
+.text-box view {
+  padding: 10px 0;
+}

xhs-mini-demos/component-case/text/text.js

@@ -0,0 +1,49 @@
+const __templateJs = require("./templates.js");
+const __mergePageOptions = require("../../util/mergePageOptions.js");
+const texts = ['2011年1月，微信1.0发布', '同年5月，微信2.0语音对讲发布', '10月，微信3.0新增摇一摇功能', '2012年3月，微信用户突破1亿', '4月份，微信4.0朋友圈发布', '同年7月，微信4.2发布公众平台', '2013年8月，微信5.0发布微信支付', '2014年9月，企业号发布', '同月，发布微信卡包', '2015年1月，微信第一条朋友圈广告', '2016年1月，企业微信发布', '2017年1月，小程序发布', '......'];
+Page(__mergePageOptions({
+  onShareAppMessage() {
+    return {
+      title: 'text',
+      path: 'page/component/pages/text/text'
+    };
+  },
+  data: {
+    text: '',
+    canAdd: true,
+    canRemove: false,
+    spaceText: '小红书小程序官方demo',
+    decodeText: '   "'&<>'
+  },
+  extraLine: [],
+  add() {
+    this.extraLine.push(texts[this.extraLine.length % 12]);
+    this.setData({
+      text: this.extraLine.join('\n'),
+      canAdd: this.extraLine.length < 12,
+      canRemove: this.extraLine.length > 0,
+      spaceText: '小红书小程序官方demo',
+      decodeText: '<  > " \' &'
+    });
+    setTimeout(() => {
+      this.setData({
+        scrollTop: 99999
+      });
+    }, 0);
+  },
+  remove() {
+    if (this.extraLine.length > 0) {
+      this.extraLine.pop();
+      this.setData({
+        text: this.extraLine.join('\n'),
+        canAdd: this.extraLine.length < 12,
+        canRemove: this.extraLine.length > 0
+      });
+    }
+    setTimeout(() => {
+      this.setData({
+        scrollTop: 99999
+      });
+    }, 0);
+  }
+}, __templateJs));

xhs-mini-demos/component-case/text/text.json

@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "文本",
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index"
+    }
+}

xhs-mini-demos/component-case/text/text.xhsml

@@ -0,0 +1,73 @@
+<view class="container">
+  <showbox title="基础展示">
+    <box>
+      <view class="_ui-space">
+        <view >
+          <text>{{spaceText}}</text>
+        </view>
+  
+        <view >
+          <text style="color: #ff2442;">{{spaceText}}</text>
+        </view>
+  
+        <view >
+          <text style="font-weight: bold;">{{spaceText}}</text>
+        </view>
+  
+        <view>
+          <text style="font-style: italic;">{{spaceText}}</text>
+        </view>
+      </view>
+    </box>
+  </showbox>
+
+  <showbox title="文本可选">
+    <box>
+      <view class="_ui-space">
+        <view >
+          <text user-select>{{spaceText}}</text>
+        </view>
+      </view>
+    </box>
+  </showbox>
+
+  <showbox title="显示连续空格">
+    <box>
+      <view class="_ui-space">
+        <view >
+          <text space="emsp">小红书    小程序    官方demo</text>
+        </view>
+      </view>
+    </box>
+  </showbox>
+
+  <showbox title="转义文本">
+    <box>
+      <view class="_ui-space">
+        <view>
+          <text decode>{{decodeText}}</text>
+        </view>
+        <view>
+          <text>{{decodeText}}</text>
+        </view>
+      </view>
+    </box>
+  </showbox>
+  
+
+  <!-- <showbox title="转义">
+    <box pad="10px" class="text-box">
+      <view >
+        <text>默认转义：&nbsp;&ensp;&emsp;&quot;&apos;&amp;&lt;&gt;\n</text>
+      </view>
+      <view >
+        <text> =============== \n</text>
+      </view>
+      <view >
+        <text>不转义 data 里的： {{decodeText}} \n</text>
+      </view>
+    </box>
+  </showbox> -->
+</view>
+
+<include src="templates.xhsml" />