功夫码

小程序开发小经验总结

小明 时间:2018-06-26 10:34:13 阅读:87
--------------------------------------------------------- Ta 只分享的内容开始 ---------------------------------------------------------------------

1:wx:for="{{}}"遍历时,要加wx:key=""否则会有警告提示VM120:3 Now you can provide attr “wx:key” for a “wx:for” to improve performance.,但页面不会报错


2:事件方法传参的写法:bindtap=“toDetail” data-data="{{item.url}}"

js:

toDetail:function(e){
  let url = e.currentTarget.dataset.data;
   wx.navigateTo({
      url: '../bookdetail/detail'
  });
 }

3.swiper自定义圆点样式

                                                                                   
          
           
            
           
         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组件绑定了 bindscroll="scroll"方法,没定义这个方法时 ,会出现这样的错误提示,但不影响效果,滚动正常,去掉即可


7.微信小程序 —— button按钮去除border边框

在开发微信小程序组件框架时,我遇到了一个问题,微信小程序中的button组件有特定的css,背景可以用“background:none”去掉,但是边框再用“border : none”去掉就不可以了,这也是微信小程序与h5的不同之处。

但是在微信小程序中使用:after选择器就可以实现这一功能。


使用 button::after{ border: none; } 来去除边框



--------------------------------------------------------- Ta 只分享了这些内容 ---------------------------------------------------------------------

本文来源:功夫码(gongfuma.com)
声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有。
未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

  • 回到顶部