小程序背输文字变有空格

由于小程序有这需求，就是让显示的一段话首行空两个空格，所以网上查了一下，

顺便也小结一下：

在text标签中一定得加上decode="{{true}}"，然后在需要显示空格的地方放 

想空几个空格就放几个 

text 文本。

1，在需要添加效果的页面的wxml添加文字。

2，在页面的wxss层编写文字的样式。

3，在页的js层，首先添加要打开的小程序码。

4，接着编写一个方法，当调用此方法时打开前面提到的小程序码图。

5，去wxml层绑定刚添加的方法。

6，接着点击可以在电脑端查看效果。

7，或用绑定了开发者的帐号进行预览。

1做小程序表单的时候上下要对齐一个文本域和input输入框，没想到小程序的textarea在android和ios上差距这么明显，如下图，本来之前遇到这个问题的时候，设置了margin和padding之后就解决了，但是在小程序上发现设置padding和margin设置为0也没用，还是去不掉android和ios表现不一的问题，于是研究了一番还是给收拾好了，下面先上问题图：

从上面两图可以看出来这个文本域差别也太大了，这效果要是说一样的话也太牵强了，于是调整了下margin、padding的，发现并没有什么用，而且这个textarea的间距在ios上大的有点离谱了，即使android和ios不要求一样，但是单一个ios上面的间距也是明显的大，难看，好，下面写下自己的解决办法，先上两张效果图 ：

下面写实现过程：

js文件:

Page({

  data: {

    detail:false,

  },

  onLoad: function (options) {

    var phone = wxgetSystemInfoSync();  //调用方法获取机型

    var that = this ;

    if (phoneplatform == 'ios') {

      thatsetData({

        detail: true

      });

    } else if (phoneplatform == 'android') {

      thatsetData({

        detail: false

      });

    }

  },

  onReady: function () {

  },

  onShow: function () {

  },

  onHide: function () {

  },

  onUnload: function () {

  },

  onPullDownRefresh: function () {

  },

  onReachBottom: function () {

  },

  onShareAppMessage: function () {

  }

})

wxml文件：

<view class='xingdongDescript'>

<view class='xingdongNameBox'><view>行动名称</view><input placeholder='请输入' /></view>

<view class='xingdongjieshaoBox'><view class='xingdongjieshao'>行动介绍</view><view class="{{detail 'iostextarea'  : 'androidtextarea'}}"><textarea placeholder='请输入' /></view></view></view>

wxss文件：

xingdongDescript{

  background: white;

  padding: 0 0 0 30rpx;

  box-sizing: border-box;

  width: 100%;

  height: 285rpx;

}

xingdongNameBox{

  width: 100%;

  height: 88rpx;

  overflow: hidden;

  padding: 0 20rpx 0 0;

  box-sizing: border-box;

  border-bottom: 1rpx solid #E5E5E5;

}

xingdongNameBox view{

  width: 25%;

  height: 88rpx;

  line-height: 88rpx;

  float: left;

  color: #000000;

  font-size: 34rpx;

}

xingdongNameBox input{

  width: 75%;

  height: 88rpx;

  line-height: normal;

  float: left;

  font-size: 34rpx;

  color: #000000;

}

xingdongjieshaoBox{

  width: 100%;

  height: 197rpx;

  overflow: hidden;

  padding: 0 20rpx 0 0;

  box-sizing: border-box;

  position: relative;

}

xingdongjieshaoBox xingdongjieshao{

  width: 25%;

  height: 88rpx;

  line-height: 88rpx;

  float: left;

  color: #000000;

  font-size: 34rpx;

  position: absolute;

  top: 0;

  left: 0

}

iostextarea{

  position: absolute;

  left: 243%;

  top: 1rpx;

  margin-left: -11rpx;

  width: 73%;

  height: 197rpx;

}

iostextarea textarea{

  position: absolute;

  width: 100%;

  height: 100%;

  font-size: 34rpx;

}

androidtextarea{

  position: absolute;

  left: 243%;

  width: 73%;

  height: 197rpx;

}

androidtextarea textarea{

  width: 100%;

  height: 197rpx;

  float: left;

  padding: 22rpx 0 0 0;

  box-sizing: border-box;

  font-size: 34rpx;

}

至此，实现想要的效果。

1、文本超过n行显示省略号

2、省略时，显示 展开/收起 按钮

3、文本不超过n行时，不显示省略号和展开/收起按钮

文本是否显示省略号，通过css可以实现；

判断是否显示展开/收起按钮；

通过SelectorQuery选择器，获取text及其父元素的高度，判断text高度是否超过其父元素高度，决定是否显示展开/收起按钮即可；

wxcreateSelectorQuery() ：返回一个 SelectorQuery 对象实例。

SelectorQueryexec(function callback) ：执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

NodesRefboundingClientRect(function callback) ：添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。

js

wxss

做项目过程中，经常遇到接口里传过来的内容是包含html标签的，但是样式又不全面，导致在小程序显示的时候，整个界面都是乱的。

这时候就要用到 rich-text

使用：

有时候展现的也是没有样式的，导致会按照原始大小显示，超出界面框架。我们需要用正则将内容转义一下：

新建一个js文件 replaceImgjs ：

在对应的界面调用：

可以在小程序内尝试打印看看获取到的最后的内容；

这时候的img标签已经被加上的style。

在一些场景中，我们需要获取到标签里面的值来和接口返回的值做对比，一致则进行下一步，后者进行错误判断

<block wx:for='{{objectArray}}'  data-name='{{itemname}}' data-id='{{itemid}}' bindtap='select'>

        <text class='yuzhong'>{{itemname}}</text>

    </view>

主要在于 data- 这个上面  上面的那个name 和 id 是我自己定义的，你们可以随意定义一些语义化的词，

获取也很简单：

select:function(e){

consolelog(ecurrentTargetdatasetname);

    },

以上就是关于小程序背输文字变有空格全部的内容，包括:小程序背输文字变有空格、小程序怎么给文本上加点、解决小程序textarea在安卓和ios上padding不一的问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！