精华内容
下载资源
问答
  • 主要为大家详细介绍了微信小程序下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序下拉框功能的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序下拉框

    2019-09-29 13:43:19
    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top-text'> 选择接收班级 ...

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

    wxml代码

    <view class='top'>
        <view class='top-text'> 选择接收班级</view>
        <!-- 下拉框 -->
        <view class='top-selected' bindtap='bindShowMsg'>
          <text>{{grade_name}}</text>
          <image src='/images/icon/down.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>

    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
        })
      },

    效果

     


    更多专业前端知识,请上【猿2048】www.mk2048.com
    展开全文
  • 主要介绍了微信小程序下拉框搜索功能的实现方法,内容比较简单容易理解 ,需要的朋友可以参考下
  • 本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景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;

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

    展开全文
  • 本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景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;

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

    本文标题: 微信小程序下拉框组件使用方法详解

    本文地址: http://www.cppcns.com/wangluo/javascript/248634.html

    展开全文
  • 这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。【推荐教程:小程序开发教程】适用场景1、...

    这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。【推荐教程:小程序开发教程】

    适用场景

    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}}

    三、性别选择

    {{gender[index]}}

    以上都需要在.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;

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

    万次阅读 2019-01-17 21:50:18
    这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 适用场景 1、省市三级联动 2、出生日期...
  • 微信小程序怎么开店现在是大多数商家和个人比较关心的问题,微信小程序开店,即有一个小程序商城。可以查看下方图片,深入了解5分钟快速制作小程序。5分钟快速制作小程序步骤一:准备工作在做微信小程序之前,首先...
  • 微信小程序下拉菜单实例,小程序的尝鲜制作,开发工具是0.9版,不过思想和原理是一样的,非常适合微信小程序入门。微信小程序下拉菜单思路与步骤:布局方面,整体使用dl来写,二级包在dd中,用ul li来写;交互方面,...
  • 微信小程序模拟下拉菜单开发实例,页面,列表,就会,子集,菜单微信小程序模拟下拉菜单开发实例易采站长站,站长之家为您整理了微信小程序模拟下拉菜单开发实例的相关内容。本文主要和大家分享微信小程序模拟下拉菜单...
  • 微信小程序文档中提供的组件有限,一定程度上限制了开发需求,这里就需要我们自定义一些控件,实现开发需求。自定义控件有两种方式,一种是选择模板的方式,另一种是选择组件的方式来创建。这里我选择了组件方式来...
  • 微信小程序组件里没有下拉框,正好要用到,记下来以后参考wxml代码 选择接收班级{{grade_name}}{{item}}wxss代码/* 顶部 */.top{width: 100vw;height: 80rpx;padding: 0 20rpx;line-height: 80rpx;font-size: 34rpx;...
  • 一、源码地址二、效果图录屏图片质量较差,所以大家会看到残影(捂脸)三、组件源码1. select.wxml{{current.name}}{{defaultOption.name}}{{item.name}}说明:用 catchtap 而不用 bindtap 是为了阻止事件冒泡,为了...
  • 小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉这里为了更清楚的显示层级 就把源码直接复制过来了商品金额¥99.00{{tihuoWay}}运费免邮实际付款¥99.00重庆分店东莞南城分店东莞总店下面是...
  • 微信小程序下拉框(筛选)

    万次阅读 2018-05-28 16:38:04
    wxml页面: 主要:&lt;view class="sort-list"&gt; &lt;view class="sort" bindtap="changeBoxBtn" data-num="0"&gt; 全部 &...height
  • } 四、组件的使用 index.wxml 总结 以上所述是小编给大家介绍的微信小程序 select 下拉框组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的...
  • //点击事件,点击弹出选择页areaTap: function () {this.setData({addressMenuIsShow:true})},cityCancel: function () {this.setData({addressMenuIsShow: false})},cityComfirm: function (e) {var p_index = this...
  • 知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。这次我选择了组件,这样只需引入组件和...
  • 小程序有时需要使用下拉框选项,通常我会使用 picker 组件实现。pick 组件使用 mode 来区分类别,默认使用普通选择器就行。 除了上述方式,我们也可以通过自定义组件实现,代码如下: //index.js Component({ /*...
  • this.data.select }) }, /** * 已选下拉框 */ mySelect(e) { console.log(e) var name = e.currentTarget.dataset.name this.setData({ grade_name: name, select: false }) }, }) wxss代码 /* 顶部 */ .top{ width:...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 183
精华内容 73
关键字:

微信小程序下拉框

微信小程序 订阅