最近做小程序时,会经常用到各种弹框.直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴.想要美美地玩,添加点动画还是非常有必要的.下面做一个底部上滑的弹框. wxml <view class="modals modals-bottom-dialog" hidden="{{hideModal}}"> <view class="modals-cancel" bindtap="hideModal"&g…

显示加载中的提示框 wx.showLoading() 当我们正在在进行网络请求时,常常就需要这个提示框 手动调用wx.hideLoading()方法才能够关闭这个提示框,通常在数据请求完毕时就应该关闭 如果一个页面中同时有多个请求,必须要等请求都完毕时才能关闭这个提示框 通常我们可以设置一个变量axiosTimes=0,在每次请求数据时将这个变量加一,请求完毕时再减一,通过判断这个变量是否为0再来决定是否关闭这个提示框 // 同步发送异步代码的次数 let axiosTimes = 0 expo…

图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. tabBar的基本属性 tabBar的list属性 tabBar的list属性介绍 参考代码 注意事项 list :接受一个数组,只能配置最少 2 个.最多 5 个 tab.tab 按数组的顺序排序,每个项都是一…

这个是网址https://www.cnblogs.com/zjjDaily/p/9548433.html 微信小程序之自定义select下拉选项框组件 知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了. 第一步:创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地…

<!-- 点击立即抢拼弹出框 --> <view class='add-rob' bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}"></view> <view class='rob-box' wx:if="{{showModalStatus}}"> <!-- 待添加商品详情 -->…

1.picker写法(支持日期Date.时间Time和城市自定义) wxml文件 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择:{{array[index]}} </view> </picker> js文件 Page({ d…

1.html <view id="bottom"></view> 2. onReady: function () { //滚动到底部 let query = wx.createSelectorQuery(); query.select('#bottom').boundingClientRect(); // 执行查询 query.exec(ele => { let e = ele[]; wx.pageScrollTo({ scrollTop: e.top,…

解决办法: 空白的出现有可能是多次触发下拉事件导致请求过多导致页面反应延迟. 在 onPullDownRefresh 事件里加setTimeout事件延迟下下拉刷新的事件. /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { wx.stopPullDownRefresh(); let _This = this; let oUInfo = _This.data.oUInfo; (!oUInfo.unionId) &&…

view: <!-- 悬浮框 --> <view class="v-fixed-title1"> <view class="v-fixed-ic"> <uni-icons size="6" class="v-fixed-icon" type="chatbubble" color="#ffffff"> </uni-icons> &…

问题场景: 下图中的显隐密码和验证码均为包裹在 input标签 中的 image标签, 但在开发测试中发现点击不了这俩个image标签,因为是被input标签的padding挡住了. 解决方法:将image标签用position定位定到对应的位置 1.wxml: <view class="position"> <input class="inputs psw" type="text" value="{{verifica…