微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等

一. 脚本部分：

1. 表达式无效的处理：

如果你发现自己编写的表达式无效或者数据不展示，那么请先检查你的表达式是否有添加{{}}，小程序中全部都要添加的，只要是在模板中调用js中的数据

2. 获取元素位置问题：

微信小程序是基于数据的，不支持DOM和BOM，所以没有提供获取元素位置的方法。

虽然有提供滚动事件、触摸事件，也只能获取触摸点相关的位置，并不能直接获取元素的位置，暂时还没摸索到合适替代方案。

3. 单击事件传值：

在小程序中，你无法再像h5那种直接在单击事件方法中传参了，它只提供了bingtap事件来绑定事件函数，参数需要由

data-

开头的自定义属性来传递：

官方的内容就不贴了，直接提供怎么使用：

wxml:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

js:

bindViewTap:function(event){
event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
}

二. 样式部分：

1. 微信小程序动态修改类样式：

<view data-num="1" class="list-menu list-menu1 {{_num==1?'cur':''}}" bindtap="menuClick">头条</view>

2. 轮播指示点样式修改：

swiper .wx-swiper-dot{
width:10rpx;
height:10rpx;
}

3. css样式实现向右箭头导航符号：

wxml:

<view class='arrow'/>

wxss:

.arrow{
width: 10rpx;
height: 10px;
border-top: 2px solid #999;
border-right: 2px solid #999;
transform: rotate(45deg);
}

三. 组件部分：

1. 自定义组件的使用容易出现的误区：

Component构造器并没有onLoad事件，所以就需要使用attached了，这个最容易忽略

四. 框架部分：

1. 设置启动页面——方便调试当前编辑页面：

app.json文件中，pages数组，把要设置为启动页面的页面路由放在数组第一位就好了。需要注意的是，这个数组中不可以有任何注释（会报错）。