本篇文章给大家带来的内容是关于微信小程序开发常用的方法总结(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
1:wx:for=”{{}}”遍历时,要加wx:key=""否则会有警告提示VM120:3 Now you can provide attr “wx:key” for a “wx:for” to improve performance.,但页面不会报错
js:
toDetail:function(e){ let url = e.currentTarget.dataset.data; wx.navigateTo({ url: '../bookdetail/detail' }); }
<view class="wrap"> <swiper class="swiper_book_img" current="{{currentSwiper}}" bindchange="swiperChange"> <block wx:for="{{banner}}" wx:key="unique"> <swiper-item class="slide_img"> <image src="{{item.picUrl}}" class="slide-image" width="100%" height="110" ></image> </swiper-item> </block> </swiper> <!--重置小圆点的样式 --> <view class="dots"> <block wx:for="{{banner}}" wx:key="unique"> <view class="dot{{index == currentSwiper ? ' active' : ''}}" id="{{index}}"></view> </block> </view> </view>
js:data: { // tab切换 currentSwiper: 0 },swiperChange: function (e) { this.setData({ currentSwiper: e.detail.current }) },wxss:/*用来包裹所有的小圆点 */ .dots { display: flex; justify-content:center; flex-direction: row; margin:22rpx auto; } /*未选中时的小圆点样式 */ .dot { width: 10rpx; height: 10rpx; border-radius: 50%; margin-right: 18rpx; background-color: #969FA9; opacity: 0.5; } /*选中以后的小圆点样式 */ .active { width: 20rpx; height: 10rpx; border-radius:20rpx;background-image: linear-gradient(-90deg, rgba(150,159,169,0.50) 24%, #F5F7FA 100%); border-radius: 100px; }4.微信小程序获取当前页面的url
使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组,数组最后一个就是当前页面
var pages = getCurrentPages() //获取加载的页面 var currentPage = pages[pages.length-1] //获取当前页面的对象 var url = currentPage.route //当前页面url var options = currentPage.options //如果要获取url中所带的参数可以查看options可以写成工具函数放到utils中:
/获取当前页url/ function getCurrentPageUrl(){ var pages = getCurrentPages() //获取加载的页面 var currentPage = pages[pages.length-1] //获取当前页面的对象 var url = currentPage.route //当前页面url return url } /获取当前页带参数的url/ function getCurrentPageUrlWithArgs(){ var pages = getCurrentPages() //获取加载的页面 var currentPage = pages[pages.length-1] //获取当前页面的对象 var url = currentPage.route //当前页面url var options = currentPage.options //如果要获取url中所带的参数可以查看options//拼接url的参数 var urlWithArgs = url + '?' for(var key in options){ var value = options[key] urlWithArgs += key + '=' + value + '&' } urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length-1) return urlWithArgs} module.exports = { getCurrentPageUrl: getCurrentPageUrl, getCurrentPageUrlWithArgs: getCurrentPageUrlWithArgs }5.A页面跳转到B页面 标题更新
全局的app.js 中设置参数存放标题
globalData: { userInfo: null, bookTitle:”” } A页面跳转方法中设置全局的标题参数 app.globalData.bookTitle =”标题” B页面 onLoad:function(){ wx.setNavigationBarTitle({ title: app.globalData.bookTitle }) }6 scroll组件
<scroll-view scroll-y="true" bindscrolltoupper="refresh" bindscrolltolower="loadMore" lower-threshold="50" bindscroll="scroll">scroll组件绑定了 bindscroll=”scroll”方法,没定义这个方法时 ,会出现这样的错误提示,但不影响效果,滚动正常,去掉即可
7.微信小程序 —— button按钮去除border边框
在开发微信小程序组件框架时,我遇到了一个问题,微信小程序中的button组件有特定的css,背景可以用“background:none”去掉,但是边框再用“border : none”去掉就不可以了,这也是微信小程序与h5的不同之处。
但是在微信小程序中使用:after选择器就可以实现这一功能。使用 button::after{ border: none; } 来去除边框
相关推荐:
微信小程序如何获取用户session_key,openid,unioni(代码)
以上就是微信小程序开发常用的方法总结(代码)的详细内容,更多请关注php中文网其它相关文章!
小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。
……
相关阅读