微信小程序分页的简单样式实现

先上效果图

比较简单，接到需求做一个分页器，但是在网上找了很多都没有现成的代码，就打算自己手写一个
后来感觉这个做得完整的话实现起来有点复杂，需求也改了，就没再往下做了
有需要的可以在我的基础上添加一些逻辑代码，把它完善一下

代码

wxml

<view class="tr">
  <view class="td">
    <text class="cuIcon-pullleft"></text>
  </view>
  <view class="td" wx:for="{{pageNumber}}">
    <text class="{{currentPage==index+1?'on':''}}">{{index+1}}</text>
  </view>
  <view class="td">
    <text class="cuIcon-pullright"></text>
  </view>
</view>

wxss

.tr {
    display: flex;
    justify-content: center;
    height: 3rem;
    align-items: center;
    margin: auto;
}

.td {
    width: 58rpx;
    height: 52rpx;
    text-align: center;
    /* border: solid thin gray; */
    font-size: large;
    padding: 6rpx;
    color: grey;
}

.on{
    color: blue;
}

js

data: {
    currentPage: 4,
    pageNumber: 7
  }