UI框架_TDesign组件

使用UI组件库，可以提升开发效率，有一些特效是小程序组件并没有提供的，可以在组件库中寻找

1. Rate 评分
2. Sticky 吸顶容器
3. Toast 轻提示
4. ...

Rate 评分

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置

xxxxxxxxxx
{
  "usingComponents": {
    "t-rate": "tdesign-miniprogram/rate/rate"
  }
}

wxml实现

xxxxxxxxxx
<view class="demo-rate">
  <view class="demo-rate__title">请点击评分</view>
  <!-- 实心评分，设置属性：variant-->
  <t-rate value="{{ value }}" variant="filled" bind:change="onChange" />
</view>

逻辑实现

xxxxxxxxxx
Page({
  data: {
    value: 3
  },
  onChange(e) {
    const { value } = e.detail;
    this.setData({
      value
    });
  },
});

Sticky 吸顶容器

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置

xxxxxxxxxx
"usingComponents": {
    "t-button": "tdesign-miniprogram/button/button",
    "t-sticky": "tdesign-miniprogram/sticky/sticky"
}

wxml实现

xxxxxxxxxx
<view class="top">
    <t-sticky offset-top="{{0}}">
        <t-button class="box2" theme="danger" t-class="inner-box" size="small">吸顶距离</t-button>
    </t-sticky>
    <view class="box"></view>
</view>

wxss实现

xxxxxxxxxx
.top {
    margin-top: 100px;
}
.box{
    height: 1000px;
}

Toast 轻提示

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置

xxxxxxxxxx
"usingComponents": {
  "t-toast": "tdesign-miniprogram/toast/toast"
}

逻辑实现

xxxxxxxxxx
import Toast from 'tdesign-miniprogram/toast/index';
Page({
    onLoad() {
        Toast({
            context: this,
            selector: '#t-toast',
            message: '轻提示文字内容',
        });
    }
})

xxxxxxxxxx
<t-toast id="t-toast" />