1.微信小程序 富文本的使用
1.1 微信小程序 富文本rich-text使用
wxml
<view>
<rich-text nodes="{{html}}"></rich-text>
</view>
js
Page({
data: {
html:''
},
onLoad: function (options) {
var that = this
that.setData({
html: '<p class="colorred">上九天揽月下五湖捉鳖</p>'
})
},
})
5.微信小程序自定义单选框（radio）默认样式
wxml
<view class="radio-box" wx:for="{{radios}}" key="item.id">
<lebel class="radio {{ index==sex ? 'on' : ''}}" data-index='{{index}}' data-value='{{item.value}}' bindtap="check">
<image wx:if='{{index==sex}}' src='../../images/arrow.png'></image>
</lebel>{{item.label}}
</view>
js
Page({
data: {
sex: 0,
radios: [
{
label: '男',
value: '男',
},
{
label: '女',
value: '女',
},
]
},
check(e) {
console.log(e)
var that = this;
var sex = e.currentTarget.dataset.index
that.setData({
sex:sex
})
},
})wxss
.radio-box{
display: inline-block;
position: relative;
height: 15px;
line-height: 15px;
margin-right: 5px;
font-size: 26rpx;
}
.input-radio {
display: inline-block;
position: absolute;
opacity: 0;
width: 15px;
height: 15px;
cursor: pointer;
left: 0px;
outline: none;
-webkit-appearance: none;
}
.radio {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
vertical-align: middle;
cursor: pointer;
background: #D7D7D9;
}
.on{
background: wheat
}
lebel image{
width: 15px;
height: 15px;
}