您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序select下拉框?qū)崿F(xiàn)源碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
小程序中是沒有h6中的下拉 標(biāo)簽的 所以要實(shí)現(xiàn)下拉功能就必須自己動手寫拉,這里為了更清楚的顯示小程序?qū)蛹?就把源碼直接復(fù)制過來了
<view class='list-msg'> <view class='list-msg1'> <text>商品金額</text> <text>¥99.00</text> </view> <!--下拉框 --> <view class='list-msg2' bindtap='bindShowMsg'> <text>{{tihuoWay}}</text> <image style='height:20rpx;width:20rpx;' src='/images/down.png'></image> </view> <view class='list-msg1'> <text>運(yùn)費(fèi)</text> <text></text>免郵</view> <view class='list-msg1'> <text>實(shí)際付款</text> <text style='color:red'>¥99.00</text> </view> <!-- 下拉需要顯示的列表 --> <view class="select_box" wx:if="{{select}}"> <view class="select_one" bindtap="mySelect" data-name="重慶分店">重慶分店</view> <view class="select_one" bindtap="mySelect" data-name="東莞南城分店">東莞南城分店</view> <view class="select_one" bindtap="mySelect" data-name="東莞總店">東莞總店</view> </view> </view>
下面是js代碼
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { select: false, tihuoWay: '門店自提' }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function(options) { }, bindShowMsg() { this.setData({ select: !this.data.select }) }, mySelect(e) { var name = e.currentTarget.dataset.name this.setData({ tihuoWay: name, select: false }) }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function() { } }) .list - msg { padding: 0 20rpx; background - color: #fff; position: relative; } .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: 93 % ; 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; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。