中国移动 微服务 分布式服务 selenium file xamarin scripting Momentjs angularjs教程 jmeter性能测试视频 sql视频教程 less使用 jquery删除子元素 pytorch安装教程 mysql数据库名称 多线程实现方式 svn安装后右键不显示 kubernetes官网 python中time python中import python的编译器 python怎么入门 python如何调用函数 java中string java运行环境 java时间戳转日期 获取当前时间java java文件删除 java语言入门 垃圾邮件数据集 pr滤镜插件 python队列 java电子书 微信彩色字 flash基础 野德天赋 安卓刷机精灵 京东钱包客户端 修改ip地址软件 透视网格工具怎么取消
当前位置: 首页 > 学习教程  > 编程语言

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

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?