全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[钦州seo公司就选久澳]微信小程序如何实现下拉框效果?(代码示例)

  本篇文章给大家带来的内容是介绍微信小程序如何实现下拉框效果□■?(代码示例)。瑞金市小程序开发哪家好有一定的参考价值,有需要的朋友可以参考一下,甘南州小程序制作公司希望对你们有所帮助★▼●。

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

  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
 })
 }▽◁◆-,

 

  效果展示:

  总结:以上就是本篇文章的全部内容▪◇▷,希望能对大家的学习有所帮助■•。[钦州seo公司就选久澳]

  以上就是微信小程序如何实现下拉框效果-●…▽?(代码示例)的详细内容○•◁▪,更多请关注久澳传媒编程栏目其它相关文章▼•![杭州SEO公司认准]微信小程序模拟cookie的实现

[钦州seo公司就选久澳]微信小程序如何实现下拉框效果?(代码示例)

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。