aircrack-ng angularjs wpf string qt search service datagridview nlp swift2 vue插件 vue图表 react视频教程 bootstrap日历插件 spark大数据处理技术 kafka学习 wordpress本地建站 matlab取绝对值 mysql或者条件 math保留两位小数 python中items python中的map函数 python的编译器 java实用教程 java怎么学 java文件复制 linux内核编程 按钮制作 abaqus最新版本 端口关闭工具 ipad锁屏 pr缩放 快捷精灵 winterboard 滑动门代码 idataparameter 电脑cmd命令大全 ps制作表格 国都证券官网下载 小米8游戏模式
当前位置: 首页 > 学习教程  > 编程语言

picker-view——实现picker自定义样式

2020/12/5 10:06:06 文章标签:

文章目录参考文档遇到的坑组件封装(time-picker)使用效果图参考文档 picker-view vant组件——Layout 布局 picker/vant-DatetimePicker实现选择器(time.wxs文件查看此博客) 遇到的坑 picker-view中indicator-style里的单位尺寸不能rpx,会滚动选择时出现选择的想…

文章目录

        • 参考文档
        • 遇到的坑
          • 组件封装(time-picker)
          • 使用
          • 效果图

参考文档

picker-view
vant组件——Layout 布局
picker/vant-DatetimePicker实现选择器(time.wxs文件查看此博客)

遇到的坑

  1. picker-viewindicator-style里的单位尺寸不能rpx,会滚动选择时出现选择的想不能居中的现象,后来我用px可以了
  2. van-row要自己设置height等于line-height,才能保证文字垂直方向的居中,同时搭配picker-viewpicker-view-column里使用时,单位也要用px,用rpx也是有偏差

在这里插入图片描述

组件封装(time-picker)
  1. index.wxml
<!--对时间格式化函数,具体可参看链接-->
<wxs
  module="time"
  src="../../../../utils/time.wxs"
></wxs>

<!-- 自定义弹出选择框 -->
<view
  bindtap="closePicker"
  class="mask"
  wx:if="{{show}}"
></view>
<picker-view
  bindchange="changePicker"
  class="show"
  indicator-style="height:40px"
  wx:if="{{show}}"
>
  <view class="btns">
    <view bindtap="closePicker">取消</view>
    <view bindtap="confrimPicker">确认</view>
  </view>
  <view class="title">
    <van-row custom-class="t-center mb-14">
      <van-col span="5">序号</van-col>
      <van-col span="6">取号截止</van-col>
      <van-col span="6">预计就诊</van-col>
      <van-col span="7">挂号费用</van-col>
    </van-row>
  </view>
  <picker-view-column>
    <van-row
      custom-class="row-height"
      wx:for="{{sourceList}}"
    >
      <van-col
        custom-class="black"
        span="5"
      >{{item.numNo+'号'}}</van-col>
      <van-col
        custom-class="black"
        span="6"
      >{{time.formatTime(item.orderNumTime,'h:m')}}</van-col>
      <van-col
        custom-class="black"
        span="6"
      >{{time.formatTime(item.orderNumTime,'h:m')}}-{{time.formatTime(item.clinicTime,'h:m')}}</van-col>
      <van-col
        custom-class="black"
        span="7"
      >{{schedule.fee}}</van-col>
    </van-row>
  </picker-view-column>
</picker-view>

  1. index.js
import ReserveAPI from '../../../../resource/reserve';

const component = {
  options: {
    styleIsolation: 'shared',
  },

  properties: {
    show: {
      type: Boolean,
      value: false,
      observer(newVal, oldVal) {
        if (newVal === oldVal) {
          return;
        }
        if (newVal) {
          this.getSource();
        } else {
          this.setData({ sourceList: [] });
        }
      },
    },
  },

  data: {
    sourceList: [],
    value: 0,
  },

  methods: {
  //请求函数,按照项目要求自定义
    async getSource() {
      const { data } = await ReserveAPI.getSource();
      this.setData({ sourceList: data });
    },

    changePicker(e) {
      this.setData({
        value: e.detail.value,
      });
    },

    closePicker() {
      this.triggerEvent('closePicker');
    },

    confrimPicker() {
      let { sourceList, value } = this.data;
      this.triggerEvent('confrimPicker', sourceList[value]);
    },
  },
};

Component(component);

  1. index.wxss
/* 在pciker-view用rpx单位会有偏差 */
picker-view .row-height {
  height: 40px;
  line-height: 40px;
}

picker-view {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  border-radius: 30rpx 30rpx 0 0;
  z-index: 999;
  padding: 30rpx;
}

picker-view .btns {
  width: 100%;
  color: #333333;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

picker-view .title {
  width: 100%;
  position: absolute;
  top: 70rpx;
  z-index: 5;
}

picker-view.show {
  height: 45%;
  transition: all 0.6s;
}

picker-view-column {
  border-radius: 30rpx 30rpx 0 0;
  color: #b8b8b8;
  font-size: 32rpx;
  margin-top: -45rpx;
}

/* 遮罩层 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

使用
  1. inde.xwxml
<time-picker
  bind:closePicker="closePicker"
  bind:confrimPicker="confrimPicker"
  show="{{isShowPicker}}"
/>
  1. index.js
const page = {
  data: {
    isShowPicker: false,
  },

  closePicker() {
    this.setData({
      isShowPicker: false,
    });
  },

  confrimPicker(e) {
    const source = e.detail;
    this.setSelectSource(source);
    this.setData({
      isShowPicker: false,
    });
  },
};

Page(page);
效果图

在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_450150.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?