标王 热搜:
 
当前位置: 首页 » 系统运维 » web应用 » 正文

微信小程序如何实现下拉框效果?(代码示例)

放大字体  缩小字体 发布日期:2019-04-27  来源:bLINCk  作者:xinb2b.cn  浏览次数:39
核心提示:本篇文章给大家带来的内容是介绍微信小程序如何实现下拉框效果?(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希


本篇文章给大家带来的内容是介绍微信小程序如何实现下拉框效果?(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

微信小程序组件里没有下拉框,正好要用到,记下来以后参考

wxml代码:


<view class='top'>
    <view class='top-text'> 选择接收班级</view>
    <!-- 下拉框 -->
    <view class='top-selected' bindtap='bindShowMsg'>
      <text>{{grade_name}}</text>
      <image src=https://www.xinb2b.cn/skin/dhsk/image/nopic.gif    </view>
    <!-- 下拉需要显示的列表 -->
    <view class="select_box" wx:if="{{select}}">
      <view wx:for="{{grades}}" wx:key="unique">
        <view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view>
      </view>
    </view>
  </view>

wxss代码:


.top{
  width: 100vw;
  height: 80rpx;
  padding: 0 20rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  border-bottom: 1px solid #000;
}.top-text{
  float: left}.top-selected{
    width: 50%;
    display: flex;
    float: right;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    padding: 0 10rpx;
    font-size: 30rpx;
}.select_box {
    background-color: #fff;
    padding: 0 20rpx;
    width: 50%;
    float: right;
    position: relative;
    right: 0;
    z-index: 1;
    overflow: hidden;
    text-align: left;
    animation: myfirst 0.5s;
    font-size: 30rpx;
}.select_one {
    padding-left: 20rpx;
    width: 100%;
    height: 60rpx;
    position: relative;
    line-height: 60rpx;
    border-bottom: 1px solid #ccc;
}@keyframes myfirst {
    from {
        height: 0rpx;
    }
 
    to {
        height: 210rpx;
    }}.top-selected image{
  height:50rpx;
  width:50rpx;
  position: absolute;
  right: 0rpx;
  top: 20rpx;
}

js代码:


 
  data: {
    select:false,
    grade_name:'--请选择--',
    grades: [        '猛犸机器人1班',        '猛犸机器人2班',        '口才1班',
      ]
  },
  bindShowMsg() {    this.setData({
      select: !this.data.select
    })
  },
  mySelect(e) {
    console.log(e)    var name = e.currentTarget.dataset.name    this.setData({
      grade_name: name,
      select: false
    })
  },

效果展示:

1.jpg

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

以上就是微信小程序如何实现下拉框效果?(代码示例)的详细内容,更多请关注其它相关文章!

bLINCk
 
关键词: 示例
 
[ 系统运维搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 违规举报 ]  [ 关闭窗口 ]
 
推荐图文
微信小程序如何实现下拉框效果?(代码示例) filter怎样全局使用
关于scroll 超实用的大神级云端设计神器!
推荐系统运维
点击排行
 
网站首页 | 关于我们 | 联系方式 | 使用协议 | 版权隐私 | 网站地图 | 排名推广 | 广告服务 | 积分换礼 | 网站留言 | RSS订阅