小程序 3

小程序常用组件及应用（wxml中使用）

 

1. 制作一行多列可切换的导航栏       

 

  data: {
    cont: 0,
    list:['one', 'two', 'three'],
    data:['12312321312321312312','252525252525466262426426465', '99999999999999999999999'],
  },

  tab_btn: function (e) {
    this.setData({
      cont: e.target.dataset.index
    })
  },

<view>
  <view class='line_tab'>
    <view wx:for="{{list}}" wx:key="list_key" class='tab_context'>
      <view class='{{cont == index ? "tab_on": " "}}' data-index="{{index}}" bindtap='tab_btn'>{{item}}</view>
    </view>  
  </view>
  <view>
    <view>{{data[cont]}}</view>
  </view>
</view>

.line_tab {
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.tab_context {
  color: white;
  border-bottom: solid 1rpx black;
}
.tab_on{
  color: burlywood;
  border-bottom: solid 1rpx orange;
}

 

2. 轮播图制作：swiper     

 

data: {
    cont: 0,
    list:['one', 'two', 'three'],
  },

<view>
  <swiper>
    <swiper-item style="background-color:pink;" wx:for="{{list}}" wx:key="swiper_key">
      {{item}}
    </swiper-item>
  </swiper>
</view>

 

3. 页面中制作可横向，纵向拖动的滚动区域 scroll-view

　　重点：

　　　　a. 标签scroll-view默认不能滚动，需要设置：scroll-x / scroll-y   = "true"

　　　　b. 纵向滚动，需要预先设置css中纵向高度，如height: 600rpx

　　　　c. 横向滚动，需要在css中将整个scroll-view设置为不换行：white-space：nowrap；，并且设置每个子内容为行内块元素：display：inline-block，使其横向排列.

<view style='width:100%; height:100rpx;'>  
  <text>纵向滚动</text>
</view>

<scroll-view class='scrollCss' scroll-y="true">
  <view id="demo1" class="column1"></view>
  <view id="demo2"  class="column2"></view>
  <view id="demo3" class="column3"></view>
</scroll-view>


<view style='width:100%; height:100rpx;'>  
  <text>横向滚动</text>
</view>
<view class='test'>
  <scroll-view class='scrollCss_row' scroll-x="true">
    <view class="row11">1</view>
    <view class="row22">2</view>
    <view class="row33">3</view>
  </scroll-view>
</view>

.scrollCss {
  width: 100%;
  height: 600rpx;
}

.column1{
  background-color: green;
  height: 300rpx;
}
.column2{
  background-color: blue;
  height: 300rpx;
}
.column3{
  background-color: brown;
  height: 300rpx;
}

.scrollCss_row {
  width: 100%;
  white-space: nowrap;
}
.row11{
  background-color: green;
  display: inline-block;
  width: 500rpx;
  height: 300rpx;
}
.row22{
  background-color: blue; 
  display: inline-block;
  width: 500rpx;
  height: 300rpx;
}
.row33{
  background-color: brown;
  display: inline-block;
  width: 500rpx;
  height: 300rpx;
}

 

4. 小程序自带图标

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
})

<view class="group">
  <block wx:for="{{iconSize}}" wx:key="">
    <icon type="success" size="{{item}}"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconType}}" wx:for-item='itemaa'>
    <block wx:for="{{iconColor}}" wx:key="color_key">
      <icon type="{{itemaa}}" color='{{item}}' size="40"/>{{type_key}}
    </block>
  </block>
</view>