精华内容
下载资源
问答
  • 主要介绍了微信小程序 下拉列表的实现实例代码的相关资料,需要的朋友可以参考下
  • 小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。 需要在 .json 文件中配置。 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是...
  • 自定义微信小程序下拉选择框组件

    万次阅读 2018-09-21 21:54:45
    自定义微信小程序下拉选择框组件如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能...

    自定义微信小程序下拉选择框组件

    预览效果图:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    预览效果

    ========================================================

    首先要新建一个组件

    1.在想要的位置上新建一个目录
    在这里插入图片描述
    2.在该目录中 右键 → 新建一个Component
    工具会自动生成四个文件(无视assets,那是我放图片的地方)
    在这里插入图片描述
    其中我们一般修改 .js .wxml .wxss 文件

    3.观察select.json文件
    “component”: true 这句话表示这个目录是作为一个组件的,可以给别的目录用
    在这里插入图片描述

    ========================================================

    开始编码

    selector.wxml

    <view class='selectBox'> 
      <view class='select' catchtap='selectTap'> 
        <text class='select_text'>{{selectData[index]}}</text> 
        <image class='select_img {{selectShow&&"select_img_rotate"}}' 
               src='../selector/assets/jiantou.jpg' 
               background-size="contain">
        </image> 
      </view> 
    
      <view class='optionBox'
      		style='height:300rpx;'>     
      	<text class='option' 
              wx:for='{{selectData}}' 
              wx:key='this' 
              data-index='{{index}}' 
              catchtap='optionTap'>{{item}}
        </text> 
      </view> 
    </view>
    

    ========================================================
    selector.wxss(要改的样式可以自己改)

    .selectBox{ height:1.5rem;border:2px solid black;border-radius: 20rpx; position: relative; padding-left: 10rpx} 
    .selectBox .select{ box-sizing: border-box; width: 100%; height: 100%; border-radius: 8rpx; display: flex; align-items: center; padding: 0 10rpx; } 
    .selectBox .select .select_text{ font-size: 35rpx; color:black; line-height: 28rpx; flex: 1; } 
    .selectBox .select .select_img{ width: 30rpx; height: 30rpx; display: block; transition:transform 0.3s; }
     .selectBox .select .select_img_rotate{ transform:rotate(180deg); } 
    .selectBox .optionBox{ position: absolute; top: calc(100%); width: 100%; box-sizing: border-box; height: 0; overflow-y: auto; background: #fff; transition: height 0.3s; border-left:2px solid black; border-right:2px solid black;border:1px solid black ;z-index:9999} 
    .selectBox .optionBox .option{ display: block; line-height: 50rpx; font-size: 35rpx; border-top: 2px solid black; padding: 10rpx;z-index:9999;} 
    

    =======================================================
    selector.js

    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        selectData: { //下拉列表的数据
          type: Array,
          value: [] //初始数据,可通过属性修改
        },
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        selectShow: false,//控制下拉列表的显示隐藏,false隐藏、true显示
        index: 0,//选择的下拉列表下标
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        selectTap() {
          this.setData({
            selectShow: !this.data.selectShow
          });
        },
        optionTap(e){
          let Index=e.currentTarget.dataset.index;
          this.setData({
            index:Index,
            selectShow:!this.data.selectShow
          });
        }
      }
    })
    

    ========================================================

    定义完了组件,开始使用

    1.首先在要使用的地方的.json文件中声明用到了该组件

    {
      "usingComponents": {
        "selector":"/pages/selector/selector"
      }
    }
    

    2.直接使用组件标签(selectData定义为属性,可以自定义可选的列表)

         <selector selectData="{{position}}"></selector>
    

    OK,大功告成!
    附上我的箭头图片 ↓↓↓↓
    箭头

    展开全文
  • 主要介绍了微信小程序显示下拉列表功能,涉及微信小程序navigator组件导航及页面加载相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
  • 微信小程序例子——下拉列表

    万次阅读 2016-10-05 21:19:46
    微信小程序例子——下拉列表

    1、效果展示

    2、关键代码

    .js文件

    Page({
      data:{
        // text:"这是一个页面"
        open:false
      },
      showitem:function(){
          this.setData({
              open:!this.data.open
          })
      },
      onLoad:function(options){
        // 页面初始化 options为页面跳转所带来的参数
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      onHide:function(){
        // 页面隐藏
      },
      onUnload:function(){
        // 页面关闭
      }
    })


    .wxml文件

    
       
        
        
            
         
          点击我显示下拉列表
         
            
         
          
           列表1
          
         
            
         
          
           列表2
          
         
            
         
          
           列表3
          
         
        
        
    
       

    .wxss文件

    .page_bd{
        padding: 10px;
        background-color: snow;
    }
    .body_head{
        border: 1px solid;
        border-color: beige;
        padding: 10px;
    }
    .display_show{
        display: block;
        border: 1px solid;    
        border-color: beige;
        padding: 10px;
    }
    .display_none{
        display: none;
    }
    

    3、源代码获取方式

    【百度云】链接:http://pan.baidu.com/s/1c87hEm 密码:rd3g

    展开全文
  • 微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多
  • 小程序下拉列表框菜单

    万次阅读 2018-12-10 14:27:11
    小程序下拉列表框菜单 &lt;view class='top'&gt; &lt;view class='top-text'&gt; 选择班别&lt;/view&gt; &lt;!-- 下拉框 --&gt; &lt;view class='top-selected' bindtap='...

    小程序下拉列表框菜单

    <view class='top'>
      <view class='top-text'> 选择班别</view>
      <!-- 下拉框 -->
      <view class='top-selected' bindtap='bindShowMsg'>
        <text>{{grade_name}}</text>
        <image src='/images/xia.png'></image>
      </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>
    
    /* 顶部 */
    
    .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;
    }
    
    // pages/zy/zy.js
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        select: false,
        grade_name: '--请选择--',
        grades: ['1班', '2班', '3班', ]
      },
      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
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function() {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function() {
    
      }
    })
    

    效果

    展开全文
  • 求一个小程序 三级联动下拉选择框的demo, 不使用picker组件。。。
  • 主要为大家详细介绍了微信小程序实现列表下拉刷新上拉加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序下拉列表菜单

    千次阅读 2018-12-01 10:26:14
    效果图:   1.wxml   2.wxss .list-msg {  padding: 0 10rpx; background-color: #fff; position: relative; width: 90%; margin: 30rpx auto; }   .list-msg .list-msg2 { ...display: ...

    效果图:

     

    1.wxml

     

    2.wxss

    .list-msg { 

    padding: 0 10rpx;

    background-color: #fff;

    position: relative;

    width: 90%;

    margin: 30rpx auto;

    }

     

    .list-msg .list-msg2 {

    height: 70rpx;

    display: flex;

    align-items: center;

    justify-content: space-around;

    border: 1px solid #f89219;

    padding: 0 20rpx;

    color: #f89219;

    border-radius: 10rpx;

    }

     

    .select_box {

    padding: 0;

    width: 97%;

    position: absolute;

    top: 90rpx;

    z-index: 1;

    overflow: hidden;

    animation: myfirst 0.5s;

    text-align: center;

    border: 1px solid #f89219;

    color: #f89219;

    border-radius: 10rpx;

    }

     

    @keyframes myfirst {

    from {

    height: 0rpx;

    }

     

    to {

    height: 300rpx;

    }

    }

     

    .select_one {

    height: 70rpx;

    line-height: 70rpx;

    border-bottom: 1px solid #f89219;

    background: #fff;

    }

     

    .select_one:last-child {

    border-bottom: none;

    }

     

    3.js

    data: {

    select: false,

    tihuoWay: '五年级上册第一关班级内详情',

    }

    bindShowMsg() {

    this.setData({

    select: !this.data.select

    })

    },

    mySelect(e) {

    var name = e.currentTarget.dataset.name

    this.setData({

    tihuoWay: name,

    select: false

    })

    },

    展开全文
  • 微信小程序下拉选择

    千次阅读 2019-07-30 16:59:55
    一般来说的话,总有点需要下拉并且能够搜索选择的需求。 首先wxml <!-- 下拉菜单 --> <view class='menu-po'> <!-- 请选择 --> <view class='menu'> <view class='menu-list'> ...
  • 在基础上新增一点东西,粗糙地实现了仿微信首页下拉显示小程序列表的样式,是的,粗糙粗糙... PullToRefreshView原始的实现思路: 1.垂直方向的LinearLayout由三部分组成Header+ScrollableContent+Footer。 2...
  • 主要介绍了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法,结合实例形式分析了微信小程序列表下拉刷新及上拉加载的相关实现方法与技巧操作,需要的朋友可以参考下
  • 微信小程序 input表单与redio及下拉列表的使用实例 一个简单的预约类型的表单,效果 主要代码: <form bindsubmit=bindSave> 联系人 <input name=userName class=input type=text ...
  • 本文为大家分享了微信小程序实现图片旋转、下拉列表的具体代码,供大家参考,具体内容如下 正文: 先上效果图: index.wxml <view class=phone_personal>{{firstPerson}} ...
  • 微信小程序/下拉选择

    千次阅读 2017-11-30 12:27:58
    js Page({  data: {  selectPerson: true,  firstPerson: '个人',  selectArea: false, ... //点击选择类型  clickPerson: function () {  var selectPerson = this.data.selectPerson;  if
  • 微信小程序 自定义 下拉列表 组件

    千次阅读 2020-06-11 14:08:45
    小程序中 没有使用 html 标签中的 select 下拉框 但项目要实现这个功能 只能自己动手敲 在文件 的根目录下 新建 components 文件夹 建立一个select 的文件夹 右键 点击新建Component 然后会自动生成这四个文件 ...
  • 微信小程序-普通下拉选择器picker

    千次阅读 2019-12-19 15:41:24
    需求:从接口获取数据,数据为json,需要实现如下所示的下拉选择 查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 首先在page/index/index.js中添加定义初始数据: ...
  • 本篇文章主要介绍了微信小程序(六):列表上拉加载下拉刷新示例,非常具有实用价值,需要的朋友可以参考下。
  • 微信小程序禁止下拉 在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,在page.json里面添加: ...
  • 通过自定义PopupWindow的方式,实现Spinner下拉选择列表的控件。
  • 本文主要介绍了微信小程序中实现列表的上拉加载和下拉刷新的方法。具有很好的参考价值。下面跟着小编一起来看下吧
  • 微信下拉小程序效果

    2018-11-04 18:31:19
    实现了类似与微信的下拉小程序列表功能,ListView的头部隐藏,下拉
  • 为了提升小程序的用户体验 ,下来刷新列表图片可以用懒加载的,分页加载用concat 添加,我个人用的方法是每请求一页数据就增加一个数组,用来存放获取到的数据,这样setData重新更新数据的时候就只需要更新一组数据...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 117,625
精华内容 47,050
关键字:

下拉选择列表小程序