精华内容
下载资源
问答
  • 小程序 下拉选择框

    2018-12-14 14:53:00
    选择下拉列 表下标, } // 点击下拉显示 selectTap() { this .setData({ show: ! this .data.show, }); }, // 点击下拉列表 optionTap(e) { let Index = e.currentTarget.dataset.index; ...
      <!-- 下拉框 -->
        <view class='select_box'>
          <view class='select' catchtap='selectTap'>
            <text class='select_text'>{{selectData[index]}}</text>
            <image class='words_img' src='../../images/dv.png'></image>
            <image class='select_img {{show&&"select_img_rotate"}}' src='/image/gobottom.png'></image>
          </view>
          <view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>
            <text class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</text>
          </view>
        </view>
    data{
      show: false, //控制下拉列表的显示隐藏,false隐藏、true显示
        selectData: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据
        index: 0, //选择的下拉列 表下标,
    }
    
      // 点击下拉显示框
      selectTap() {
        this.setData({
          show: !this.data.show,
        });
      },
      // 点击下拉列表
      optionTap(e) {
        let Index = e.currentTarget.dataset.index; //获取点击的下拉列表的下标
        this.setData({
          index: Index,
          show: !this.data.show
        });
      },
    .select_box {
      background: #fff;
      width: 620rpx;
      margin: 0 auto;
      margin-top: 40rpx;
      height: 86rpx;
      line-height: 86rpx;
      text-align: left;
      position: relative;
    }
    
    .select {
      box-sizing: border-box;
      width: 100%;
      height: 86rpx;
      border: 1px solid #efefef;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }
    
    .select_text {
      font-size: 28rpx;
      flex: 1;
      color: rgb(102, 102, 102);
      line-height: 86rpx;
      height: 86rpx;
    }
    
    .select_img {
      width: 40rpx;
      height: 40rpx;
      display: block;
      transition: transform 0.3s;
    }
    
    .select_img_rotate {
      transform: rotate(180deg);
    }
    
    .option_box {
      position: absolute;
      top: 86rpx;
      width: 100%;
      border: 1px solid #efefef;
      box-sizing: border-box;
      height: 0;
      overflow-y: auto;
      border-top: 0;
      background: #fff;
      transition: height 0.3s;
    }
    
    .option {
      display: block;
      line-height: 40rpx;
      font-size: 28rpx;
      border-bottom: 1px solid #efefef;
      padding: 10rpx;
      color: rgb(102, 102, 102);
      font-size: 28rpx;
    }

     

    转载于:https://www.cnblogs.com/wangshishuai/p/10119434.html

    展开全文
  • 自定义微信小程序下拉选择框组件

    万次阅读 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,大功告成!
    附上我的箭头图片 ↓↓↓↓
    箭头

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

    千次阅读 2019-07-30 16:59:55
    一般来说的话,总有点需要下拉并且能够搜索选择的需求。 首先wxml <!-- 下拉菜单 --> <view class='menu-po'> <!-- 请选择 --> <view class='menu'> <view class='menu-list'> ...
    	一般来说的话,总有点需要下拉并且能够搜索选择的需求。
    

    首先wxml

    <!-- 下拉菜单   -->
        <view class='menu-po'>
          <!-- 请选择 -->
          <view class='menu'>
            <view class='menu-list'>
              <view class="{{item.key==menuNums&&openPicker?'menu-nav2':'menu-nav'}}" wx:for="{{ msgList }}" wx:for-index="idx" data-key='{{item.key}}' wx:key="key" data-hi="{{ idx }}" data-name='{{item.name}}' bindtap="menuClick">
                <text class='menu-text'>{{ item.name }}</text>
                <image class='menu-image' src='/pages/img/pull.png'></image>
              </view>
            </view>
          </view>
          <!-- 列表栏 -->
          <view class='menu-if'>
            <!-- 区域 -->
            <view class="meun-txt over-auto" hidden='{{ meunShow[0].isShows ? true : false }}'>
              <scroll-view scroll-y="true" style="height: 446rpx">
                <text wx:for="{{ sousuoList }}" data-id="{{item.id}}" class='meun-city-txt meun-city-txt-price' bindtap='souSearch' data-name='{{item.name}}'>{{ item.name }}</text>
              </scroll-view>
            </view>
    
          </view>
        </view>
    

    其次是wxss

    .menu-po {
      position: relative;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 25%;
      margin-left: 5%;
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    
    .menu-list {
      display: flex;
      justify-content: space-between;
    }
    
    .menu-nav {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .menu-nav2 {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .menu-nav2 image {
      width: 24rpx;
      height: 15rpx;
    }
    
    .menu-nav2 text {
      font-size: 14px;
    }
    
    .menu-nav image {
      width: 24rpx;
      height: 15rpx;
    }
    
    .menu-nav text {
      color: #696969;
      font-size: 14px;
    }
    
    .shadow {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 1;
      position: absolute;
      top: 210rpx;
    }
    
    .menu-if {
      background-color: #fff;
      box-sizing: border-box;
      position: absolute;
      z-index: 9;
      margin-left: -15px;
      width: 100%;
    }
    
    .swiper-item {
      background: #fff;
      width: 100%;
      height: 600rpx;
      display: none;
      position: absolute;
      top: 100rpx;
      z-index: 333333;
      left: 0;
      animation: displays 1s;
    }
    
    .meun-txt {
      height: auto;
      color: #696969;
    }
    
    .menu-text-list {
      position: relative;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
    
    .menu-text-list-left {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding-left: 35rpx;
    }
    
    /* text样式 */
    
    .meun-city-txt {
      display: block;
      border-bottom: 1rpx solid #e9e9e9;
      width: 100%;
      padding: 25rpx 0;
      font-size: 14px;
    }
    
    .meun-city-txt-price {
      display: flex;
      justify-content: center;
    }
    
    .menu-text-list-rig {
      width: 50%;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #f9f9f9;
      z-index: 10;
      box-sizing: border-box;
      padding-left: 35rpx;
    }
    
    
    

    最后是js文件

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        msgList: [{
          key: 1,
          name: '请选择'
        }],
        // 判断导航栏列表是否显示
        meunShow: [{
          isShows: true
        }],
        sousuoList: [{
          id: 1,
          name: '新房'
        }, {
          id: 2,
          name: '二手房'
        }, {
          id: 3,
          name: '写字楼'
        }, {
          id: 4,
          name: '商铺'
        }, {
          id: 5,
          name: '出租'
        }],
      },
      souSearch: function (e) {
        var that = this;
        var openPicker = this.data.openPicker;
        var house_name = e.target.dataset.name;
    
        var msgList = that.data.msgList;
        this.setData({
          openPicker: !openPicker,
        })
        for (var i = 0; i < msgList.length; i++) {
          var keys = msgList[i].key;
          if (keys == 1) {
            msgList[i].name = house_name;
            that.setData({
              msgList: msgList,
              house_name: house_name
            })
          }
        }
    
    
        var menuNum = that.data.menuNum;
        var meunShow = this.data.meunShow;
        var menuSrc = "meunShow[" + menuNum + "].isShows";
        // console.log('menuNum:' + menuNum);
        for (var n = 0; n < meunShow.length; n++) {
          // 拼接 ,使我们可以获取到menuShow里面每一个isSHows
          var menuSrcs = meunShow[n].isShows;
          // console.log('menuSrcs:' + menuSrcs);
          // 解决重复点击不能隐藏的问题
          if (n != menuNum) {
    
            this.setData({
              menuSrcs: true
            });
          };
        };
    
        // 给当前点击的去反data中设置的meunShow,使之显示, 只写此处只会显示不能隐藏
        this.setData({
          [menuSrc]: !this.data.meunShow[menuNum].isShows
        });
    
      },
    
      menuClick: function (e) {
        // 获取通过wxml  data-hi="{{ idx }}" 传过来的索引
        var that = this;
        var menuNum = e.currentTarget.dataset.hi;
        that.setData({
          menuNum: menuNum
        })
        var name = e.currentTarget.dataset.name;
        if (name == that.data.name) {
          // console.log('==');
          that.setData({
            openPicker: !this.data.openPicker,
          })
        } else {
          // console.log('!=');
          that.setData({
            openPicker: true,
          })
        }
    
        that.setData({
          name: name
        })
        // console.log(name + ',' + menuNum);
        // 拼接 ,使我们可以获取到menuShow里面每一个isSHows
        var menuSrc = "meunShow[" + menuNum + "].isShows";
        // console.log('picker:' + this.data.openPicker);
        this.setData({
          needAnimation: true,
          menuNums: menuNum + 1
        });
    
        // 循环data中设置的meunShow
        for (var n = 0; n < this.data.meunShow.length; n++) {
          // 拼接 ,使我们可以获取到menuShow里面每一个isSHows
          var menuSrcs = "meunShow[" + n + "].isShows";
          // 解决重复点击不能隐藏的问题
          if (n != menuNum) {
            // 初始化,每次点击时先全部隐藏,但是重复点击不会隐藏
            this.setData({
              [menuSrcs]: true
            });
          };
        };
    
        // 给当前点击的去反data中设置的meunShow,使之显示, 只写此处只会显示不能隐藏
        this.setData({
          [menuSrc]: !this.data.meunShow[e.currentTarget.dataset.hi].isShows
        });
      },
      })
    

    这就是下拉选择框的全部代码了。

    展开全文
  • 许多线上和线下商店都加入了小程序开发的行列,但毕竟他们没有开发经验,所以他们只能依靠专业的微信小程序公司,那么每个人应该如何选择适当的微信小程序开发公司? 小程序在线制作平台 这也是技术型公司可以考虑...

    8829f3f272fdfd3ef74cdaf7d83b3d8b.png

    微信小程序最大特点小巧方便。人们不需要下载,也不会占用每个人手机的太多内存空间。他们可以享受与APP相同的功能。许多商家利用小程序的优势为自己的商店带来流量源源不断的客流量,许多线上和线下商店都加入了小程序开发的行列,但毕竟他们没有开发经验,所以他们只能依靠专业的微信小程序公司,那么每个人应该如何选择适当的微信小程序开发公司?

    f7e0be9ba04707156a37840bd5594d3d.png

      小程序在线制作平台

      这也是技术型公司可以考虑的方向,通过SAAS技术和小程序逻辑相结合,让企业/个人只需打字传图、简单拖拽,就可在几分钟内搭建一个小程序,无需自己写代码和找外包。这个也就是所谓的小程序模板开发,功能相对简单、不便于再次开发,更不利于一些商家的推广。要知道,每一个商家本身都会有各自的独特之处,产品也是有着独特的地方。如果我们选择这样的模板,就不能与其他竞争产品拉开距离。其实有的时候,一些商家就是依靠着不同的设计理念吸引客户,并形成一个良好的服务氛围,如果这点做不到,那就会损失很多潜在客户。简单的说,小程序在线制作模板开发不利于营销、功能扩展、没有源代码、安全性不高等缺点。优点就是,开发周期短、开发成本较低。

    8829f3f272fdfd3ef74cdaf7d83b3d8b.png

    展开全文
  • 1,什么是小程序一键授权托管?和原来有什么区别?1.将小程序授权给有赞,有赞会自动帮助您生成店铺小程序,并提交给微信审核,省了各种折腾;2.无须复杂操作,不要研究代码包,即可快速拥有你的小程序;3.每次功能...
  • 一,什么是小程序一键授权托管?和原来有什么区别?1.将小程序授权给有赞,有赞会自动帮助您生成店铺小程序,并提交给微信审核,省了各种折腾;2.无须复杂操作,不要研究代码包,即可快速拥有你的小程序;3.每次功能...
  • 电商时代,大家都在追求简单便利的...而小程序微商城网站则是一个不错的选择。那么,会有什么好处呢?从以下三点可以分析①利于商家获客小程序微商城拥有60+个流量入口:微信搜索、附近小程序小程序码、小程序名...
  • 商家可根据自身营业情况来选择合适的小程序类型。 这就是两个小程序制作流程了!宠物及相关服务衍生,是个有广阔商机的行业,如果你想在宠物行业创业,有一个自己的小程序,对生意会很有帮助哦! 点击下方“阅 读 ...
  • //选择下拉列表下标 }, // 点击下拉显示 selectTap() { this .setData({ show: ! this .data.show }); }, // 点击下拉列表 optionTap(e) { let Index = e.currentTarget.dataset.index; //...
  • 求一个小程序 三级联动下拉选择框的demo, 不使用picker组件。。。
  • 小程序下拉列表菜单

    万次阅读 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='...
  • 微信小程序下拉选项

    万次阅读 2019-02-18 11:55:06
    效果图 test.js /** * 页面的初始数据 */ data: { shows: false, //控制下拉列表的显示隐藏,false隐藏、true显示 selectDatas: ['消费... indexs: 0, //选择下拉列 表下标, }, // 点击下拉显示 s...
  • 小程序--下拉选择框

    2019-05-06 11:05:47
    index: 0, //选择下拉列 表下标, } // 点击下拉显示 selectTap() { this.setData({ show: !this.data.show, }); }, // 点击下拉列表 optionTap(e) { let Index = e.currentTarget.dataset.index; //...
  • 效果图-组件下载 源码 房屋信息 选择房屋 > 一期8栋 1120室 北虹桥科技园8号楼-301 缴费项 {{i.title}} ¥1200 {{j.data}} ¥ {{j.money}} 全选 合计: ¥{{sumChecked}} 去付款 Page({ data: { isAllChecked: false,...
  • uniapp写微信小程序的选择器(类似于select option下拉选择框) 我是在读了uniapp组件后,运用表单组件picker来进行修改写了一个简易的二十四节气的选择器 首先绑定点击事件## 标题 触发点击事件 添加选项 点击...
  • 参考了一位大佬的帖子做了一个下拉选择框可手动输入的实例。 参考原文:https://blog.csdn.net/yelin042/article/details/79078068 下面是我的代码: 样式我是用weui的样式库 <!-- html --> <view class=...
  • 下拉加载 上拉加载 编码实现 wxml <!--pages/unitmanage/unitlease/unitlease.wxml--> <view> <view class='menu-po'> <!-- 下拉菜单 --> <view class='menu'> <view class=...
  • '请选择' : yilaifang_time}} view> picker> view> <view class="zhuifangbox"> 来访说明view> 来访说明" scroll-y="{{true}}">{{analysis}}scroll-view> view> view> view> js: // bindlfdateChange ...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 345
精华内容 138
关键字:

小程序下拉选择框