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

一. 脚本部分：

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了，这个最容易忽略

 2. navigator导航组件无效：

有的时候你会发现，把另一个写好的已经可以正常跳转的导航复制过来改url，url拼写也没有问题，导航就是无法跳转吗，这个时候第一个应该考虑的就是你这个导航已经被用在底部菜单栏中了，这是小程序的一个限制，没办法，只能用单击事件做跳转。

 

四. 框架部分：

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

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

 

转载于:https://www.cnblogs.com/xyyt/p/8477455.html