【微信小程序封装底部弹出框二】

<!--index.wxml-->
<view><button style="margin-top: 300px;" catchtap="changeRange">点击唤起弹窗</button><!-- 弹框 --><dialog id='dialog' catchtouchmove="preventTouchMove" bind:customEventHandler="customEvent"></dialog><!-- <button style="margin-top: 300px;" catchtap="changeRange2">点击唤起弹窗222</button> --><!-- 弹框 --><!-- <dialogA id='dialog' catchtouchmove="preventTouchMove" bind:customEventHandler="customEvent"></dialogA> -->
</view>

{"usingComponents": {"dialogA":"/components/dialogA/dialog","dialog":"/components/dialog/dialog"}
}

// index.js
// 获取应用实例
const app = getApp()Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {this.popup = this.selectComponent("#dialog"); //获取},// 调用子组件事件changeRange(e) {var _this = this;_this.popup.changeRange(); //调用子组件内的函数},// 调用子组件事件---弹窗2changeRange2(e) {var _this = this;_this.popup.changeRange(); //调用子组件内的函数},// 接受子组件传递的值customEvent: function (event) {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

<!--components/dialog/dialog.wxml--><view class="half-screen" catchtouchmove="preventTouchMove"><!--屏幕背景变暗的背景  --><view class="background_screen" catchtap="hideModal" wx:if="{{showModalStatus}}"></view><!--弹出框  --><view animation="{{animationData}}" class="attr_box" wx:if="{{showModalStatus}}"><!-- 菜单 --><view class="menuBox"><view class="menu-item"><view class="menuImgBox"><image src="/img/pushShop.png" class="menuImg"></image></view><view class="menuText">发布商品</view></view><view class="menu-item"><view class="menuImgBox"><image src="/img/pushBuy.png" class="menuImg"></image></view><view class="menuText">发布采购</view></view></view><view class="closeBox"><image src="/img/closeDialog.png" catchtap="hideModal" class="closeDialogImg"></image></view></view>
</view>

/* components/dialog/dialog.wxss */
/*模态框*/
/*使屏幕变暗  */
.background_screen {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.2;overflow: hidden;z-index: 1000;color: #fff;
}/*对话框 */
.attr_box {background: #FFFFFF;opacity: 1;/* border-radius: 0px 0px 0px 0px; *//* height: 500rpx; */height: 480rpx;width: 100%;overflow: hidden;position: fixed;bottom: 0;left: 0;z-index: 2000;background: transparent;/* background: rgba(66, 66, 66, .6); */padding-top: 50rpx;padding-bottom: 90rpx;box-sizing: border-box;background-repeat: no-repeat;background-size: 100%;background-image: url(data:image/png;base64,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DyzJiAQIECBAgAABAgSEuxsgQIAAAQIECBAgEBAQ7oElGZEAAQIECBAgQICAcHcDBAgQIECAAAECBAICwj2wJCMSIECAAAECBAgQEO5ugAABAgQIECBAgEBAQLgHlmREAgQIECBAgAABAsLdDRAgQIAAAQIECBAICAj3wJKMSIAAAQIECBAgQEC4uwECBAgQIECAAAECAQHhHliSEQkQIECAAAECBAgIdzdAgAABAgQIECBAICAg3ANLMiIBAgQIECBAgAAB4e4GCBAgQIAAAQIECAQEhHtgSUYkQIAAAQIECBAgINzdAAECBAgQIECAAIGAgHAPLMmIBAgQIECAAAECBIS7GyBAgAABAgQIECAQEBDugSUZkQABAgQIECBAgIBwdwMECBAgQIAAAQIEAgLCPbAkIxIgQIAAAQIECBAQ7m6AAAECBAgQIECAQEBAuAeWZEQCBAgQIECAAAECwt0NECBAgAABAgQIEAgICPfAkoxIgAABAgQIECBAQLi7AQIECBAgQIAAAQIBAeEeWJIRCRAgQIAAAQIECAh3N0CAAAECBAgQIEAgICDcA0syIgECBAgQIECAAAHh7gYIECBAgAABAgQIBASEe2BJRiRAgAABAgQIECAg3N0AAQIECBAgQIAAgYCAcA8syYgECBAgQIAAAQIEhLsbIECAAAECBAgQIBAQEO6BJRmRAAECBAgQIECAgHB3AwQIECBAgAABAgQCAsI9sCQjEiBAgAABAgQIEBDuboAAAQIECBAgQIBAQEC4B5ZkRAIECBAgQIAAAQLC3Q0QIECAAAECBAgQCAgI98CSjEiAAAECBAgQIEBAuLsBAgQIECBAgAABAgEB4R5YkhEJECBAgAABAgQICHc3QIAAAQIECBAgQCAgINwDSzIiAQIECBAgQIAAAeHuBggQIECAAAECBAgEBIR7YElGJECAAAECBAgQICDc3QABAgQIECBAgACBgIBwDyzJiAQIECBAgAABAgSEuxsgQIAAAQIECBAgEBAQ7oElGZEAAQIECBAgQICAcHcDBAgQIECAAAECBAICwj2wJCMSIECAAAECBAgQEO5ugAABAgQIECBAgEBAQLgHlmREAgQIECBAgAABAsLdDRAgQIAAAQIECBAICAj3wJKMSIAAAQIECBAgQEC4uwECBAgQIECAAAECAQHhHliSEQkQIECAAAECBAgIdzdAgAABAgQIECBAICAg3ANLMiIBAgQIECBAgAAB4e4GCBAgQIAAAQIECAQEhHtgSUYkQIAAAQIECBAgINzdAAECBAgQIECAAIGAgHAPLMmIBAgQIECAAAECBIS7GyBAgAABAgQIECAQEBDugSUZkQABAgQIECBAgIBwdwMECBAgQIAAAQIEAgLCPbAkIxIgQIAAAQIECBAQ7m6AAAECBAgQIECAQEBAuAeWZEQCBAgQIECAAAECwt0NECBAgAABAgQIEAgICPfAkoxIgAABAgQIECBAQLi7AQIECBAgQIAAAQIBAeEeWJIRCRAgQIAAAQIECAh3N0CAAAECBAgQIEAgICDcA0syIgECBAgQIECAAAHh7gYIECBAgAABAgQIBASEe2BJRiRAgAABAgQIECAg3N0AAQIECBAgQIAAgYCAcA8syYgECBAgQIAAAQIEhLsbIECAAAECBAgQIBAQEO6BJRmRAAECBAgQIECAgHB3AwQIECBAgAABAgQCAsI9sCQjEiBAgAABAgQIEBDuboAAAQIECBAgQIBAQEC4B5ZkRAIECBAgQIAAAQLC3Q0QIECAAAECBAgQCAgI98CSjEiAAAECBAgQIEBAuLsBAgQIECBAgAABAgEB4R5YkhEJECBAgAABAgQICHc3QIAAAQIECBAgQCAgINwDSzIiAQIECBAgQIAAAeHuBggQIECAAAECBAgEBIR7YElGJECAAAECBAgQICDc3QABAgQIECBAgACBgIBwDyzJiAQIECBAgAABAgSEuxsgQIAAAQIECBAgEBAQ7oElGZEAAQIECBAgQICAcHcDBAgQIECAAAECBAICwj2wJCMSIECAAAECBAgQEO5ugAABAgQIECBAgEBAQLgHlmREAgQIECBAgAABAsLdDRAgQIAAAQIECBAICAj3wJKMSIAAAQIECBAgQEC4uwECBAgQIECAAAECAQHhHliSEQkQIECAAAECBAgIdzdAgAABAgQIECBAICAg3ANLMiIBAgQIECBAgAAB4e4GCBAgQIAAAQIECAQEhHtgSUYkQIAAAQIECBAgINzdAAECBAgQIECAAIGAgHAPLMmIBAgQIECAAAECBIS7GyBAgAABAgQIECAQEBDugSUZkQABAgQIECBAgIBwdwMECBAgQIAAAQIEAgLCPbAkIxIgQIAAAQIECBAQ7m6AAAECBAgQIECAQEBAuAeWZEQCBAgQIECAAAECwt0NECBAgAABAgQIEAgICPfAkoxIgAABAgQIECBAQLi7AQIECBAgQIAAAQIBAeEeWJIRCRAgQIAAAQIECAh3N0CAAAECBAgQIEAgICDcA0syIgECBAgQIECAAAHh7gYIECBAgAABAgQIBASEe2BJRiRAgAABAgQIECAg3N0AAQIECBAgQIAAgYCAcA8syYgECBAgQIAAAQIEhLsbIECAAAECBAgQIBAQEO6BJRmRAAECBAgQIECAgHB3AwQIECBAgAABAgQCAsI9sCQjEiBAgAABAgQIEBDuboAAAQIECBAgQIBAQEC4B5ZkRAIECBAgQIAAAQLC3Q0QIECAAAECBAgQCAgI98CSjEiAAAECBAgQIEBAuLsBAgQIECBAgAABAgEB4R5YkhEJECBAgAABAgQICHc3QIAAAQIECBAgQCAgINwDSzIiAQIECBAgQIAAAeHuBggQIECAAAECBAgEBIR7YElGJECAAAECBAgQICDc3QABAgQIECBAgACBgIBwDyzJiAQIECBAgAABAgSEuxsgQIAAAQIECBAgEBAQ7oElGZEAAQIECBAgQICAcHcDBAgQIECAAAECBAICwj2wJCMSIECAAAECBAgQEO5ugAABAgQIECBAgEBAQLgHlmREAgQIECBAgAABAsLdDRAgQIAAAQIECBAICAj3wJKMSIAAAQIECBAgQEC4uwECBAgQIECAAAECAQHhHliSEQkQIECAAAECBAgIdzdAgAABAgQIECBAICAg3ANLMiIBAgQIECBAgAAB4e4GCBAgQIAAAQIECAQEhHtgSUYkQIAAAQIECBAgINzdAAECBAgQIECAAIGAgHAPLMmIBAgQIECAAAECBIS7GyBAgAABAgQIECAQEBDugSUZkQABAgQIECBAgIBwdwMECBAgQIAAAQIEAgLCPbAkIxIgQIAAAQIECBAQ7m6AAAECBAgQIECAQEBAuAeWZEQCBAgQIECAAAECwt0NECBAgAABAgQIEAgICPfAkoxIgAABAgQIECBAQLi7AQIECBAgQIAAAQIBAeEeWJIRCRAgQIAAAQIECAh3N0CAAAECBAgQIEAgICDcA0syIgECBAgQIECAAAHh7gYIECBAgAABAgQIBASEe2BJRiRAgAABAgQIECAg3N0AAQIECBAgQIAAgYCAcA8syYgECBAgQIAAAQIEhLsbIECAAAECBAgQIBAQEO6BJRmRAAECBAgQIECAgHB3AwQIECBAgAABAgQCAsI9sCQjEiBAgAABAgQIEBDuboAAAQIECBAgQIBAQEC4B5ZkRAIECBAgQIAAAQLC3Q0QIECAAAECBAgQCAgI98CSjEiAAAECBAgQIEBAuLsBAgQIECBAgAABAgEB4R5YkhEJECBAgAABAgQICHc3QIAAAQIECBAgQCAgINwDSzIiAQIECBAgQIAAAeHuBggQIECAAAECBAgEBIR7YElGJECAAAECBAgQICDc3QABAgQIECBAgACBgIBwDyzJiAQIECBAgAABAgSEuxsgQIAAAQIECBAgEBAQ7oElGZEAAQIECBAgQICAcHcDBAgQIECAAAECBAICwj2wJCMSIECAAAECBAgQEO5ugAABAgQIECBAgEBAQLgHlmREAgQIECBAgAABAsLdDRAgQIAAAQIECBAICAj3wJKMSIAAAQIECBAgQEC4uwECBAgQIECAAAECAQHhHliSEQkQIECAAAECBAgIdzdAgAABAgQIECBAICAg3ANLMiIBAgQIECBAgAAB4e4GCBAgQIAAAQIECAQEhHtgSUYkQIAAAQIECBAgINzdAAECBAgQIECAAIGAgHAPLMmIBAgQIECAAAECBIS7GyBAgAABAgQIECAQEBDugSUZkQABAgQIECBAgIBwdwMECBAgQIAAAQIEAgLCPbAkIxIgQIAAAQIECBAQ7m6AAAECBAgQIECAQEBAuAeWZEQCBAgQIECAAAECwt0NECBAgAABAgQIEAgICPfAkoxIgAABAgQIECBAQLi7AQIECBAgQIAAAQIBAeEeWJIRCRAgQIAAAQIECAh3N0CAAAECBAgQIEAgICDcA0syIgECBAgQIECAAAHh7gYIECBAgAABAgQIBASEe2BJRiRAgAABAgQIECAg3N0AAQIECBAgQIAAgYCAcA8syYgECBAgQIAAAQIEhLsbIECAAAECBAgQIBAQEO6BJRmRAAECBAgQIECAgHB3AwQIECBAgAABAgQCAsI9sCQjEiBAgAABAgQIEBDuboAAAQIECBAgQIBAQEC4B5ZkRAIECBAgQIAAAQLC3Q0QIECAAAECBAgQCAgI98CSjEiAAAECBAgQIEBAuLsBAgQIECBAgAABAgEB4R5YkhEJECBAgAABAgQICHc3QIAAAQIECBAgQCAgINwDSzIiAQIECBAgQIAAAeHuBggQIECAAAECBAgEBIR7YElGJECAAAECBAgQICDc3QABAgQIECBAgACBgIBwDyzJiAQIECBAgAABAgSEuxsgQIAAAQIECBAgEBAQ7oElGZEAAQIECBAgQICAcHcDBAgQIECAAAECBAICwj2wJCMSIECAAAECBAgQEO5ugAABAgQIECBAgEBAQLgHlmREAgQIECBAgAABAsLdDRAgQIAAAQIECBAICAj3wJKMSIAAAQIECBAgQEC4uwECBAgQIECAAAECAQHhHliSEQkQIECAAAECBAgIdzdAgAABAgQIECBAICAg3ANLMiIBAgQIECBAgAAB4e4GCBAgQIAAAQIECAQEhHtgSUYkQIAAAQIECBAgINzdAAECBAgQIECAAIGAgHAPLMmIBAgQIECAAAECBIS7GyBAgAABAgQIECAQEBDugSUZkQABAgQIECBAgIBwdwMECBAgQIAAAQIEAgLCPbAkIxIgQIAAAQIECBAQ7m6AAAECBAgQIECAQEBAuAeWZEQCBAgQIECAAAECwt0NECBAgAABAgQIEAgICPfAkoxIgAABAgQIECBAQLi7AQIECBAgQIAAAQIBAeEeWJIRCRAgQIAAAQIECAh3N0CAAAECBAgQIEAgICDcA0syIgECBAgQIECAAAHh7gYIECBAgAABAgQIBASEe2BJRiRAgAABAgQIECAg3N0AAQIECBAgQIAAgYCAcA8syYgECBAgQIAAAQIEhLsbIECAAAECBAgQIBAQEO6BJRmRAAECBAgQIECAgHB3AwQIECBAgAABAgQCAsI9sCQjEiBAgAABAgQIEBDuboAAAQIECBAgQIBAQEC4B5ZkRAIECBAgQIAAAQLC3Q0QIECAAAECBAgQCAgI98CSjEiAAAECBAgQIEBAuLsBAgQIECBAgAABAgEB4R5YkhEJECBAgAABAgQICHc3QIAAAQIECBAgQCAgINwDSzIiAQIECBAgQIAAAeHuBggQIECAAAECBAgEBIR7YElGJECAAAECBAgQICDc3QABAgQIECBAgACBgIBwDyzJiAQIECBAgAABAgSEuxsgQIAAAQIECBAgEBAQ7oElGZEAAQIECBAgQICAcHcDBAgQIECAAAECBAICwj2wJCMSIECAAAECBAgQEO5ugAABAgQIECBAgEBAQLgHlmREAgQIECBAgAABAsLdDRAgQIAAAQIECBAICAj3wJKMSIAAAQIECBAgQEC4uwECBAgQIECAAAECAQHhHliSEQkQIECAAAECBAgIdzdAgAABAgQIECBAICAg3ANLMiIBAgQIECBAgAAB4e4GCBAgQIAAAQIECAQEhHtgSUYkQIAAAQIECBAgINzdAAECBAgQIECAAIGAgHAPLMmIBAgQIECAAAECBIS7GyBAgAABAgQIECAQEBDugSUZkQABAgQIECBAgIBwdwMECBAgQIAAAQIEAgLCPbAkIxIgQIAAAQIECBAQ7m6AAAECBAgQIECAQEBAuAeWZEQCBAgQIECAAAECwt0NECBAgAABAgQIEAgICPfAkoxIgAABAgQIECBAQLi7AQIECBAgQIAAAQIBAeEeWJIRCRAgQIAAAQIECAh3N0CAAAECBAgQIEAgICDcA0syIgECBAgQIECAAAHh7gYIECBAgAABAgQIBASEe2BJRiRAgAABAgQIECAg3N0AAQIECBAgQIAAgYCAcA8syYgECBAgQIAAAQIEhLsbIECAAAECBAgQIBAQEO6BJRmRAAECBAgQIECAgHB3AwQIECBAgAABAgQCAsI9sCQjEiBAgAABAgQIEBDuboAAAQIECBAgQIBAQEC4B5ZkRAIECBAgQIAAAQLC3Q0QIECAAAECBAgQCAgI98CSjEiAAAECBAgQIEBAuLsBAgQIECBAgAABAgEB4R5YkhEJECBAgAABAgQICHc3QIAAAQIECBAgQCAgINwDSzIiAQIECBAgQIAAAeHuBggQIECAAAECBAgEBIR7YElGJECAAAECBAgQICDc3QABAgQIECBAgACBgIBwDyzJiAQIECBAgAABAgSEuxsgQIAAAQIECBAgEBAQ7oElGZEAAQIECBAgQICAcHcDBAgQIECAAAECBAICwj2wJCMSIECAAAECBAgQEO5ugAABAgQIECBAgEBAQLgHlmREAgQIECBAgAABAsLdDRAgQIAAAQIECBAICAj3wJKMSIAAAQIECBAgQEC4uwECBAgQIECAAAECAQHhHliSEQkQIECAAAECBAgIdzdAgAABAgQIECBAICAg3ANLMiIBAgQIECBAgAAB4e4GCBAgQIAAAQIECAQEhHtgSUYkQIAAAQIECBAgINzdAAECBAgQIECAAIGAgHAPLMmIBAgQIECAAAECBIS7GyBAgAABAgQIECAQEBDugSUZkQABAgQIECBAgIBwdwMECBAgQIAAAQIEAgLCPbAkIxIgQIAAAQIECBAQ7m6AAAECBAgQIECAQEBAuAeWZEQCBAgQIECAAAECwt0NECBAgAABAgQIEAgICPfAkoxIgAABAgQIECBAQLi7AQIECBAgQIAAAQIBAeEeWJIRCRAgQIAAAQIECAh3N0CAAAECBAgQIEAgICDcA0syIgECBAgQIECAAAHh7gYIECBAgAABAgQIBASEe2BJRiRAgAABAgQIECAg3N0AAQIECBAgQIAAgYCAcA8syYgECBAgQIAAAQIEhLsbIECAAAECBAgQIBAQEO6BJRmRAAECBAgQIECAgHB3AwQIECBAgAABAgQCAsI9sCQjEiBAgAABAgQIEBDuboAAAQIECBAgQIBAQEC4B5ZkRAIECBAgQIAAAQLC3Q0QIECAAAECBAgQCAgI98CSjEiAAAECBAgQIEBAuLsBAgQIECBAgAABAgEB4R5YkhEJECBAgAABAgQICHc3QIAAAQIECBAgQCAgINwDSzIiAQIECBAgQIAAAeHuBggQIECAAAECBAgEBIR7YElGJECAAAECBAgQICDc3QABAgQIECBAgACBgIBwDyzJiAQIECBAgAABAgSEuxsgQIAAAQIECBAgEBAQ7oElGZEAAQIECBAgQICAcHcDBAgQIECAAAECBAICwj2wJCMSIECAAAECBAgQEO5ugAABAgQIECBAgEBAQLgHlmREAgQIECBAgAABAsLdDRAgQIAAAQIECBAICAj3wJKMSIAAAQIECBAgQEC4uwECBAgQIECAAAECAQHhHliSEQkQIECAAAECBAgIdzdAgAABAgQIECBAICAg3ANLMiIBAgQIECBAgAAB4e4GCBAgQIAAAQIECAQEhHtgSUYkQIAAAQIECBAgINzdAAECBAgQIECAAIGAgHAPLMmIBAgQIECAAAECBIS7GyBAgAABAgQIECAQEBDugSUZkQABAgQIECBAgIBwdwMECBAgQIAAAQIEAgLCPbAkIxIgQIAAAQIECBAQ7m6AAAECBAgQIECAQEBAuAeWZEQCBAgQIECAAAECwt0NECBAgAABAgQIEAgICPfAkoxIgAABAgQIECBAQLi7AQIECBAgQIAAAQIBAeEeWJIRCRAgQIAAAQIECAh3N0CAAAECBAgQIEAgICDcA0syIgECBAgQIECAAAHh7gYIECBAgAABAgQIBASEe2BJRiRAgAABAgQIECAg3N0AAQIECBAgQIAAgYCAcA8syYgECBAgQIAAAQIEhLsbIECAAAECBAgQIBAQEO6BJRmRAAECBAgQIECAgHB3AwQIECBAgAABAgQCAsI9sCQjEiBAgAABAgQIEBDuboAVkK83AAAAm0lEQVQAAQIECBAgQIBAQEC4B5ZkRAIECBAgQIAAAQLC3Q0QIECAAAECBAgQCAgI98CSjEiAAAECBAgQIEBAuLsBAgQIECBAgAABAgEB4R5YkhEJECBAgAABAgQICHc3QIAAAQIECBAgQCAgINwDSzIiAQIECBAgQIAAAeHuBggQIECAAAECBAgEBIR7YElGJECAAAECBAgQIPA77sIx0H3xifIAAAAASUVORK5CYII=)
}/* 菜单 */.menuBox {width: 100%;height: 80%;display: flex;
}.menu-item {width: 50%;/* background-color: pink; */display: flex;flex-direction: column;align-items: center;
}.menuImgBox {/* background-color: rgb(255, 243, 192); */box-sizing: border-box;padding: 6rpx;
}.menuImg {width: 180rpx;height: 180rpx;
}.menuText {height: 40rpx;font-size: 32rpx;font-family: PingFang SC;font-weight: 400;line-height: 40rpx;color: #151521;opacity: 1;
}/* 关闭 */
.closeBox {height: 20%;display: flex;justify-content: center;align-items: flex-end;
}.closeDialogImg {width: 56rpx;height: 56rpx;
}

// // components/dialog/dialog.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {//弹窗显示控制showModalStatus: false,// isShowDialog: false, //是否显示提示控件组件},/*** 组件的方法列表*/methods: {//点击显示底部弹出changeRange: function () {this.showModal();console.log('我是弹窗打开----');},//底部弹出框showModal: function () {// 背景遮罩层var animation = wx.createAnimation({duration: 50,timingFunction: "linear",delay: 0})//this.animation = animationanimation.translateY(50).step()this.setData({animationData: animation.export(),showModalStatus: true})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export()})}.bind(this), 50)},//点击背景面任意一处时，弹出框隐藏hideModal: function (e) {//弹出框消失动画var animation = wx.createAnimation({duration: 10,timingFunction: "linear",delay: 0})//this.animation = animationanimation.translateY(10).step()this.setData({animationData: animation.export(),})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export(),showModalStatus: false})}.bind(this), 10)},},// 生命周期lifetimes: {ready: function () {},}
})

【微信小程序封装底部弹出框二】相关推荐

html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...
【微信小程序】底部弹出式搜索框
微信开发者工具的准备工作详见: [微信小程序]初始页面和导航栏. 设计中会使用到Vant Weapp组件库,添加组件库的方法参照官网:Vant Weapp - 轻量.可靠的小程序 UI 组件库. 注意 ...
微信小程序评论input 弹出框
运用了一个组件: https://youzan.github.io/vant-weapp/#/popup 这里面有详细的介绍和使用方法!!! 需求:点击评论,弹出评论的输入框,再次点击评论又会隐藏弹出 ...
微信小程序自定义showmodal 弹出框
最近一直忙着修改bug 增加新功能,好久没总结了,也不知道该总结啥,先写一个自定义showmodal框吧废话少说直接上代码 wxml部分 <view class="mask" ...
微信小程序实现气泡弹出框
这个组件可以实现引用别人的组件,上面github可以很好的实现气泡弹窗效果 <view style="margin-top: 200rpx;" class="he ...
小程序全局悬浮窗_微信小程序悬浮窗弹出怎么实现?
微信小程序悬浮窗弹出怎么实现?很多的微信小程序管理员会在微信小程序界面开发微信小程序悬浮窗弹出功能,接下来小编会为大家介绍微信小程序悬浮窗弹出关注实现的全部步骤哦. 微信小程序悬浮窗弹出怎么实现? 微 ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
小程序确定取消弹窗_小程序开发之弹出框
小程序开发过程中,很多地方为了便利我们多采用小程序自带弹出框来实现交互效果.这也够大多数开发使用,下面我给大家详细介绍下小程序弹出框 wx.showToast() title:显示的提示信息,在没有图 ...

【微信小程序封装底部弹出框二】

【微信小程序封装底部弹出框二】

【微信小程序封装底部弹出框二】相关推荐

最新文章

热门文章