Skip to content
On this page

微信小程序 ​

1、简介 ​

2、官网 ​

3、使用 ​

3.1、框架 ​

3.2、组件 ​

3.2.1、scroll-view ​

横向滚动

html
<scroll-view class="scroll-view_H" scroll-x="true">
  <view class="scroll-view-item_H">111</view>
  <view class="scroll-view-item_H">222</view>
  <view class="scroll-view-item_H">333</view>
</scroll-view>

.scroll-view_H{
  white-space: nowrap;
  width: 100%;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
  background-color: green;
}

3.2.2、button ​

3.2.2.1、id传参 ​

WARNING

id传参只能传基本类型,传对象无法解析

html
<button type="default" plain="true" bindtap="bannerBtnClick" id="{{item.type}}">查看详情</button>

// 获取参数
bannerBtnClick:function(e){
  console.log(e.target.id)
}
3.2.2.2、data-传参 ​
html
<button type="default" plain="true" bindtap="bannerBtnClick" data-type="{{item.type}}">查看详情</button>

// 获取参数
bannerBtnClick:function(e){
  console.log(e.target.dataset.type)
},
3.2.2.3、点击事件 ​
html
<button type="default" plain="true" bindtap="bannerBtnClick">查看详情</button>

### 3.3、API
#### 3.3.1、路由跳转
##### 3.3.1.1、跳转
```html
wx.navigateTo({
  url: '/pages/home/activity/activity',
})
3.3.1.2、url传参 ​
html
wx.navigateTo({
  url: '/pages/home/activity/activity?id=1',
})

// 页面获取参数
onLoad:function(options){
  console.log(options.id)
}
3.3.1.4、返回 ​
html
wx.navigateBack({
  delta: 1
})

3.3.2、API ​

Released under the MIT License.