微信小程序中的rich-text可以接收转移html标签
字体的样式处理 可以通过 给rich-text添加类名设置字体样式
的样式(自适应)
获取的html标签字符串replace(/<img/g, '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"')
它的样式来自rich-text标签或者其父元素的样式,(当两者都有时候,rich-text的优先级更高)
它的样式来自style的样式,这时候 rich-text标签或者其父元素的样式无效,此时若想要改变样式,需要用正则表达式为其添加样式。
结果:不生效
结果:当有important时候生效
>
做一个查询的功能 可以根据id查到text 或者根据text查到id
附上数组如下
resultset: [{id:1,text:"aaa"},{id:2,text:"bbb"}, {id: 3,text: 'ccc'}, {id: 4,text: 'f'}]
之前尝试了一些方法 就像在传统语言那样遍历数组然后寻找相等的值 但是发现好像并不是特别好使
var resultSet =thisdataresultset
const length = resultSetlength var val = thisdatainputValue if(val){
consolelog(val) for(let i =0;i<=length;i++){ //consolelog(resultSet[i])
if(val == resultSet[i]id){
consolelo("找到了") var result = thisdataresultSet[i]id
consolelog("结果是"+result)
} else{
consolelog("没找到结果")
}
}
} else{
consolelog("没输入啊")
}
}
微信小程序自带的API中的页面交互功能,虽然提示功能非常全面,但是所有的交互API中是没有可以自己在提示框中输入文本的功能,那么现在我们来自己做这样的一个提示框(可以带有输入功能),在提示框输入完内容之后,点击确定,可以将文本内容返回,点击取消则可以回到之前的状态。
(在这里,主页面的布局可以根据每个人的想法来布局,这里展示的css之后展示提示框部分的)
1、首先打开微信开发者工具,建立一个代码模板,那么我们这个提示框就是写在这个页面上。
这里我们主页面叫做index
2、在基本页面中写上一个姓名的文本,当前姓名用<text>{{stuName}}</text>表示,然后为一个button按钮,再在js文件中,建立相应的点击事件以及stuName的信息。这样,一个原始页面就写好了。
下面我们开始d出框页面的制作
<view class='toast-box' hidden='{{!ifName}}'>
<view class='toastbg'></view>
<view class='showToast'>
<view class='toast-title'>
<text>修改姓名</text>
</view>
<view class='toast-main'>
<view class='toast-input'>
<input placeholder='请输入姓名' bindinput='setValue' data-name='stuEidtName'></input>
</view>
</view>
<view class='toast-button'>
<view class='button1'>
<button catchtap='cancel'>取消</button>
</view>
<view class='button2'>
<button catchtap='confirm'>确定</button>
</view>
</view>
</view>
</view>
3、我们可以发现,点击按钮后d出输入框,如果点击除取消和确定之外的地方,是不会有反应的。为了做到这个功能,我们用一个绝对位置的渲染层(toastbg),覆盖住整个页面,并且如果你的页面长度没有滚动的话,请输入min—height:100vh,如果页面发生滚动,请把长度控制在height:100%即可看到整个页面都被覆盖。并且这个覆盖的页面要表现为透明,opacity:02,即可
4、bindinput为写文本时所触发的事件,data-name为文本数据所保存的地方,在js中我们可以把这个数据打印出来,会发现我们所输入的文本信息。
以下为css的代码
toast-box {
width: 100%;
height: 100%;
opacity: 1;
position: fixed;
top: 0px;
left: 0px;
}
toastbg {
opacity: 02;
background-color: black;
position: absolute;
width: 100%;
min-height: 100vh;
}
showToast {
position: absolute;
opacity: 1;
width: 70%;
margin-left: 15%;
margin-top: 40%;
}
toast-title {
padding-left: 5%;
background-color: #2196f3;
color: white;
padding-top: 2vh;
padding-bottom: 2vh;
border-top-right-radius: 16rpx;
border-top-left-radius: 16rpx;
}
toast-main {
padding-top: 2vh;
padding-bottom: 2vh;
background-color: white;
text-align: center;
}
toast-input {
margin-left: 5%;
margin-right: 5%;
border: 1px solid #ddd;
padding-left: 2vh;
padding-right: 2vh;
padding-top: 1vh;
padding-bottom: 1vh;
}
toast-button {
display: flex;
}
button1 {
width: 50%;
}
button2 {
width: 50%;
}
button1 button {
width: 100%;
background-color: white;
color: red;
border-radius: 0px;
border-bottom-left-radius: 16rpx;
}
button2 button{
width: 100%;
background-color: white;
color: black;
border-radius: 0px;
border-bottom-right-radius: 16rpx;
}
picker {
padding-top: 1vh;
padding-bottom: 1vh;
}
我们可以根据自己的喜欢,对提示框的样式进行改变
5、编写js代码,我们需要实现以下一些基本功能(点击出现d窗,取消不改变数据值,确定进行判断数据值,若为空则不能改变,否则可以改变,并且主页面上的内容要变为相应改变后的内容)
6、给最外层的d窗附上hidden(如图所示),为这个值初始为false,点击按钮后触发事件,改false为true,这样即可点击出现d窗。
7、为取消按钮附上点击事件,与hidden的部分刚好相反即可。
8、为书写文本绑定事件,上述代码中命名为setValue,这个函数我们传入一个event进去,将其打印,我们可以发现在其的detail中有我们刚刚所书写的内容,我们将这个值,传给js中data一个属性,这里我们命名为edit。
9、为确定绑定事件,用thisdataedit将这个值进行判断,若为空,我们用wxshowToast提示用户信息没有填写完整,并且页面不会改变。若不为空,则我们setData一下我们的stuName为这个edit的值,并且重新把hidden的属性值改为false。
10、返回到初始页面我们就可以看到我们自己做得一个提示框,并且具有修改值的功能
这里遇到的问题,是动态textarea列表,底部提交按钮position:fiexd悬浮。在滑动页面,textarea文本框中的文字会穿透到提交按钮上方,显示出来。这个问题困扰我好久,试了很多方法不管用,今天终于解决了,赶快记下来。
下面是提交按钮的wxss样式:
下面是提交按钮的wxml样式:
开始在textarea文本框上下功夫,想利用d出层类似的方案来解决这个穿透问题,但是最终宣告失败。
网上查,z-index分别在子层级,和父层级上设置这个属性,哪个值大,哪个层级就在最上面。
于是我在textarea上,设置z-index:0,这样,在模拟器上运行就没问题了,但是iOS真机就无效了。z-index会失去作用。textarea输入的内容还是会浸透在遮盖在textarea上的布局。后来查阅官方文档,发现用cover-view可以解决。
原生组件说明官方文档
于是,我把底部提交按钮的view控件,换成了cover-view
运行结果,还是不行,又将cover-view动态样式里加上z-index:999,问题才解决。
红框就是备注textarea中的内容,当d窗d出,内容就会穿透出来。这时用上面的z-index方面就失效了,也搞不懂是什么原因,于是通过改textarea显示方式来解决穿透问题。
思路:就是当d窗d出的时候,设置一个值为true,在textarea做wx:if判断那个值为true时,证明d窗d出,把textarea改成text显示即可。
这样,d窗穿透问题就解决了。
微信小程序的字体颜色可以使用CSS属性color来进行设置。
1 首先,在wxml文件中,使用<style>标签来设置样式。
2 在样式表中使用color属性,然后设置字体颜色。
例如,设置文字为红色:
```
<Style>
red-text {
color: #ff0000;
}
</Style>
```
3 在页面中,将要设置颜色的文字标签使用class属性来关联对应的样式类。
例如,将一个文字标签设置为红色:
```
<Text class="red-text">这段文字将会显示为红色。</Text>
```
注意:#ff0000表示红色的十六进制颜色值。更多的CSS样式可以参考CSS手册。
以上就是关于微信小程序rich-text中的nodes属性全部的内容,包括:微信小程序rich-text中的nodes属性、微信小程序的rich-text(富文本)添加样式、微信小程序中,用什么可以在WXML展开一个数组列表等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)