微信小程序-账单页面月份悬浮替换

chen_x_w

于 2021-08-23 18:16:21 发布

阅读量1.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端开发日记微信小程序文章标签： javascript

本文链接：https://blog.youkuaiyun.com/chen_x_w/article/details/119874899

实现效果如图所示，废话不多说下拉看代码
效果展示

首先，在wxml文件中进行数据遍历渲染，并添加定位view（最为关键，如果不使用dom操作定位，会导致不同手机高度不同从而效果出现差异）

<view class="container">
    <!-- 悬浮窗内容 -->
    <view class="item_top suspension" wx:if="{
   
   {is_suspension}}">
        <picker mode="date" value="{
   
   {m.formattingDate(list[suspension_index].date)}}" end="{
   
   {nowDate}}" bindchange="changeDate" fields="month">
            <text>{
   
   {
   
   list[suspension_index].date}}</text>
            <text class="toDown"></text>
        </picker>
        <view class="item_total">已提现¥{
   
   {
   
   list[suspension_index].total}}元</view>
    </view>
    
    <!-- 列表内容 -->
    <view wx:for="{
   
   {list}}" wx:key="unique">