受欢迎的博客标签

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;
}