精华内容
下载资源
问答
  • 本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景1、省市三级联动2、出生日期选择3、性别选择4、一般性的下拉选择等一、省市三级联动使用注意mode = region,以及value = ...

    本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下

    适用场景

    1、省市三级联动

    2、出生日期选择

    3、性别选择

    4、一般性的下拉选择等

    一、省市三级联动使用

    注意mode = region,以及value = “一维数组”

    //.wxml

    data-method="bindSelect" data-name="region" value="{{region}}" custom-item="{{customItem}}">

    当前选择:{{region[0]}},{{region[1]}},{{region[2]}}

    二、出生日期选择

    注意mode = date,以及value = “日期字符串”

    {{date}}

    三、性别选择

    注意,不填mode默认为selector,range=”一维数组”,value=”当前选中索引”

    {{gender[index]}}

    以上都需要在.js里设置相关初始变量!

    //.js

    var app = getApp();

    data: {

    region:['河北','沧州','河间'],

    date:'2010-10-10',

    gender:['男','女'],

    index:0

    },

    bindViewEvent:function(e){

    app.process(this,e);

    }

    相关js类

    //component.js

    const select = require('../component/select.js');

    const upload = require('../component/upload.js');

    class component{

    constructor(com, that) {

    this.com = com;

    this.that = that;

    }

    //绑定下拉框选择事件

    bindSelect(data){

    let self = this;

    let mode = data.currentTarget.dataset.mode;

    let name = data.currentTarget.dataset.name;

    let picker = new select({

    that: self.that,

    mode: mode,

    name: name

    });

    picker.change(data.detail.value);

    }

    //点击事件,传递参数为e.currentTarget.dataset

    bindImageChoose(data){

    //图片上传

    this.uploader = new upload({

    that: that,

    name: data.name,

    mode: data.mode,

    count: data.count || 9

    });

    this.uploader.choose();

    }

    bindImageDel(data){

    //图片上传

    this.uploader = new upload({

    that: that,

    name: data.name,

    mode: data.mode,

    count: data.count || 9

    });

    this.uploader.del(data.index);

    }

    }

    module.exports = component;

    //select.js

    /*

    * 下拉框对象

    */

    class picker{

    constructor(data){

    this.that = data.that;

    this.name = data.name || 'date';

    this.mode = data.mode || 'selector';

    }

    show(name,data){

    let view = {};

    view[name] = data;

    this.that.setData(view);

    }

    change(data){

    let self = this;

    self.show(self.name, data);

    }

    }

    module.exports = picker;

    //upload.js

    class picUploader {

    constructor(data) {

    this.that = data.that;

    this.name = data.name;

    this.mode = data.mode || 1;

    this.count = this.model == 1 ? 1 : data.count || 9;

    }

    /*

    * 选择图片

    */

    choose() {

    const self = this;

    wx.chooseImage({

    count: (self.count - self.that.data[self.name].length),

    sizeType: ['original', 'compressed'],

    sourceType: ['album', 'camera'],

    success: function (res) {

    var tempFilePaths = res.tempFilePaths;

    self.append(tempFilePaths);

    }

    })

    }

    /*

    * 显示图片

    */

    show() {

    let self = this;

    let view = {};

    view[self.name] = self.that.data[self.name];

    self.that.setData(view);

    }

    /*

    * 追加图片

    */

    append(data) {

    const self = this;

    for (let i = 0; i < data.length; i++) {

    self.that.data[self.name].push(data[i]);

    }

    self.show();

    }

    /*

    * 删除图片

    */

    del(index) {

    let self = this;

    self.that.data[self.name].splice(index, 1);

    self.show();

    }

    }

    module.exports = picUploader;

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 主要为大家详细介绍了微信小程序下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序下拉框功能的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 虽然近期频频更新,但微信似乎并不喜欢“高调”。昨晚微信悄悄更新了7.0.3 for iOS版本,在功能更新介绍中留下了神秘的9个字:“解决了一些已知问题”。...称之为“小程序下拉框”已然不妥,不妨就叫做“小程...

    虽然近期频频更新,但微信似乎并不喜欢“高调”。昨晚微信悄悄更新了7.0.3 for iOS版本,在功能更新介绍中留下了神秘的9个字:“解决了一些已知问题”。

    可是,7.0.3的微信仅仅只是修复一些已知bug吗?经我们测评发现,低调的微信,其实是想搞大事情噢。

    1a4175cf4a17ecca4910f49e94c36e37.png

    堪比手机操作系统的“小程序桌面”

    微信为小程序设计了一套全新的下拉界面,功能与界面设计通通大改了。称之为“小程序下拉框”已然不妥,不妨就叫做“小程序桌面”吧。

    小程序桌面共三个板块,从上到下分别为:搜索框最近使用我的小程序。「最近使用」和「搜索框」并不是新功能,但是在新版本中微信将他们的入口放得更浅、更便于访问。

    而「我的小程序」则是一个新增的“收藏夹”功能。在小程序桌面中,增删改等操作手势,都和手机原生系统保持了一致。

    78628456c35c12ac3b0a97f859b66a62.png

    有人评价说,新版的小程序桌面更像是一套“微信os”。毕竟,它的界面和操作,已经和手机一级桌面无异了。这样的“微信os”操作系统,你喜欢吗?

    除了“小程序桌面”的重磅改动,本次微信更新还有不少好玩的小彩蛋。

    彩蛋1:小程序桌面的背景色会变化

    早上、中午、晚上,小程序桌面的背景图颜色会有着深浅不同的变化。这个精致的小彩蛋,你喜欢吗?

    f54ce8edcbbc79f470f1c9e38b9e5fe3.png

    彩蛋2:微信红包新增表情回复功能

    在红包领取界面,新增了“回复一个表情”的操作界面。不过,红包领取者回复的表情并不显示在红包界面 ,而是直接发送回原聊天界面。如此看来,这只是个有趣但无用的小彩蛋?

    513aba6c8dc900251083d993d0b370fa.png

    彩蛋3:「好看」按钮被收进文章分享页

    与此前的内测版本一致,微信7.0.3 将「好看」按钮纳入文章分享页面,成为排位第三的按钮。原「收藏」按钮右移。

    这一调整,倒是意料之中的事。毕竟微信目前对新版的“看一看”信心十足,誓要重新定义文章的内容分发机制。

    38245167269b24088b0476137d398131.png

    彩蛋4:小程序新增“简称”功能

    微信更新后,开发者在填写小程序信息时,可以选择为小程序填写一个“简称”

    这个功能主要是面向开发者,但结合小程序桌面的「搜索框」,我们也不难猜测出,此举是为了让用户能有更优质、精准的小程序搜索体验。

    cbdeeec99d03ae44c99d83773ca70cdd.png

    综合来看,此次微信更新的重点显然在于小程序。微信希望用户未来可以更方便快捷地收藏、查找、访问小程序,偷偷设置了“背景色变幻”的小彩蛋来博取用户会心一笑,鼓励开发者设置小程序简称从而便于小程序的传播。

    步入2019年,各方大佬似乎都卯足了劲发力小程序。也许今年,小程序的发展会迎来一波新的高潮呢!

    (参与本文点赞或转发后,即可私信本头条号,回复【703】获取新版微信)

    展开全文
  • 主要介绍了微信小程序下拉框搜索功能的实现方法,内容比较简单容易理解 ,需要的朋友可以参考下
  • 小程序下拉框与选择器

    万次阅读 2019-06-10 09:48:38
    不得不吐槽下小程序下拉框问题,小程序是没有对应的下拉框标签的,如果要用到:要么自己手写,要么就用选择器代替实现。 正题(复制代码就行了) .wxml <view class='list-msg'> <view class='list-msg...

    不得不吐槽下小程序下拉框问题,小程序是没有对应的下拉框标签的,如果要用到:要么自己手写,要么就用选择器代替实现。

    正题(复制代码就行了)

    .wxml

      <view class='list-msg'>
        <view class='list-msg2' bindtap='bindShowMsg'>
            <text>{{tihuoWay}}</text>
            <!-- <image style='height:20rpx;width:20rpx;' src='/images/down.png'></image> -->
        </view>
        <cover-view class="select_box" wx:if="{{select}}">
            <cover-view class="select_one" bindtap="mySelect" data-name="玉林">玉林</cover-view>
            <cover-view class="select_one" bindtap="mySelect" data-name="上海">上海</cover-view>
         
        </cover-view>
      </view>

    .js

    //下拉框
      ,bindShowMsg() {
        this.setData({
          select: !this.data.select
        })
      },
      mySelect(e) {
        var name = e.currentTarget.dataset.name
        this.setData({
          tihuoWay: name,
          select: false
        })
      }

    .wxss

    .list-msg {
        margin: 0 10rpx;
        background-color: rgb(124, 122, 122);
         position: relative; 
        width: 16%;
        
    }
     
    .list-msg1 {
        /* height: 60rpx; */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
     
    .list-msg .list-msg2 {
        /* height: 60rpx; */
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ccc;
        padding: 0 10rpx;
    }
     
    .select_box {
        background-color: #eee;
        padding: 0 10rpx;
        width: 82%;
        position: absolute;
        /* top: 130rpx; */
        z-index: 1;
        overflow: hidden;
        animation: myfirst 0.5s;
    }
     
    @keyframes myfirst {
        from {
            height: 0rpx;
        }
     
        to {
            height: 210rpx;/* 设置显示的长度  和效果配合才有效  这个不写也行 */
        }
    }
     
    .select_one {
        height: 60rpx;
        line-height: 60rpx;
        border-bottom: 1px solid #ccc;
    }
    

    选择器(我就不写了 别人介绍的比较全)

    https://blog.csdn.net/qq_35713752/article/details/80295372

     注意:选器索引问题   即绑     id       name  两个参数

    最好在  bindchange 改变事件改值

    展开全文
  • 小程序下拉框动画效果

    千次阅读 2018-08-22 09:25:34
    标题 ## 小程序下拉框动画效果 前言 之前做了一个显示与隐藏的效果,显示和隐藏是瞬时发生。发现用户体验不够好,所以做了这个。 效果图 wxml wxss js 1、在page的data里,给open...

    标题 ## 小程序下拉框动画效果

    前言

    之前做了一个显示与隐藏的效果,显示和隐藏是瞬时发生。发现用户体验不够好,所以做了这个。

    效果图

    这里写图片描述

    wxml

    这里写图片描述

    wxss

    这里写图片描述

    js

    1、在page的data里,给open一个初始值为false,使其默认效果是不显示下拉详情
    2、点击事件
    这里写图片描述

    展开全文
  • 微信小程序下拉框组件使用方法

    万次阅读 2019-01-17 21:50:18
    这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 适用场景 1、省市三级联动 2、出生日期...
  • 这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。【推荐教程:小程序开发教程】适用场景1、...
  • 本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景1、省市三级联动2、出生日期选择3、性别选择4、一般性的下拉选择等一、省市三级联动使用注意mode = region,以及value = ...
  • 微信小程序下拉框

    2019-09-29 13:43:19
    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top-text'> 选择接收班级 ...
  • 一、源码地址二、效果图录屏图片质量较差,所以大家会看到残影(捂脸)三、组件源码1. select.wxml{{current.name}}{{defaultOption.name}}{{item.name}}说明:用 catchtap 而不用 bindtap 是为了阻止事件冒泡,为了...
  • 小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉这里为了更清楚的显示层级 就把源码直接复制过来了商品金额¥99.00{{tihuoWay}}运费免邮实际付款¥99.00重庆分店东莞南城分店东莞总店下面是...
  • } 四、组件的使用 index.wxml 总结 以上所述是小编给大家介绍的微信小程序 select 下拉框组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的...
  • 小程序下拉框搜索

    千次阅读 2019-07-31 11:18:00
    最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个。 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择。代码部分,我定义了五个参数,和一个...
  • 小程序有时需要使用下拉框选项,通常我会使用 picker 组件实现。pick 组件使用 mode 来区分类别,默认使用普通选择器就行。 除了上述方式,我们也可以通过自定义组件实现,代码如下: //index.js Component({ /*...
  • 微信小程序下拉框(筛选)

    万次阅读 2018-05-28 16:38:04
    wxml页面: 主要:&lt;view class="sort-list"&gt; &lt;view class="sort" bindtap="changeBoxBtn" data-num="0"&gt; 全部 &...height
  • //点击事件,点击弹出选择页areaTap: function () {this.setData({addressMenuIsShow:true})},cityCancel: function () {this.setData({addressMenuIsShow: false})},cityComfirm: function (e) {var p_index = this...
  • this.data.select }) }, /** * 已选下拉框 */ mySelect(e) { console.log(e) var name = e.currentTarget.dataset.name this.setData({ grade_name: name, select: false }) }, }) wxss代码 /* 顶部 */ .top{ width:...
  • 一、App.json设置允许下拉刷新 "window": { "backgroundTextStyle": "blue", "navigationBarTitleText": "11", "navigationBarTextStyle": "black", "enablePullDownRefresh": true }, ...
  • 微信小程序怎么开店现在是大多数商家和个人比较关心的问题,微信小程序开店,即有一个小程序商城。可以查看下方图片,深入了解5分钟快速制作小程序。5分钟快速制作小程序步骤一:准备工作在做微信小程序之前,首先...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 558
精华内容 223
关键字:

小程序下拉框