微信小程序入坑

1.navigator带参跳转可分为两种(open-type):

一种是跳转到新页面url后面的路径(open-type="navigate"  默认值可不写);

点我跳转

另一种是在当前页面打开(open-type="redirect"  可简写直接加‘redirect’)。

点我跳转

点我跳转

新建页面detail作为要跳转的新页面(  别忘了在app.json里配置哦   ):

{{title}}

detail的.js文件:

Page({

 data:{

   title:''

 },

 onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数

   this.setData({

     title:options.title

   })

}

})

tips:小程序提醒页面路径最多是五层,应尽量避免多层级的交互方式出现。

2.真机调试无法显示本地图片

本地图片设置背景时,在编辑器可以预览,真机调试时无法显示,是因为本地资源无法通过css获取background-image。可以通过使用网络图片解决,或者base64,或者image标签用定位叠加。

3.给wx:for循环的view点击时添加样式

刚开是试了这种方法:

data : {bgColor : '#000' }

list1

changeBg: function(){

        this.setData({ bgColor:'#fff'});

}

但是这种方法好像并没有什么用,因为我的列表是动态创建的,这样绑定changeBg的话所有的样式都会变,,,,哎呀,好气哦!!!!!

综合网上各种说法后,把效果写了出来,直接贴图


1).wcss样式,listOne是普通样式,checked是列表选中是的样式;

微信小程序入坑_第1张图片

.js文件中写循环列表要加载的数据和处理函数

微信小程序入坑_第2张图片


微信小程序入坑_第3张图片

2).列表内容渲染到wxml页面,使用三目运算判断当前item的id。这个方法还可以做bindtap传值(data-id);

最终效果,很丝滑~~~~~~~~


微信小程序入坑_第4张图片

还有一种也试了一下hover-class=’checked’,当点击列表元素时当按下鼠标左键会显示checked样式,但是鼠标松开样式就会复原,不能到达需要的效果。

你可能感兴趣的:(微信小程序入坑)