微信小程序基础之试图控件View、ScrollView、Swiper

时间:2023-01-09 21:44:06

今天写一篇关于微信小程序视图控件的文章,主要是介绍界面的搭建和部分操作js交互功能的介绍,转载请注明出处,谢谢~

首先显示首页结构。创建三个navigator,用来跳转页面:

<!--index.wxml-->
<!--创建一个标签介绍-->
<view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
<!--创建三个navigator,一定要记住为了便捷,可以把新创建的文件放
在index文件下,然后对应写文件跳转路径,如:Component/View/View,
在软件的最下面有对应编辑文件的路径地址-->

<view class="viewName">
  <navigator url="Component/View/View">
    <text class="view-Name">View展示</text>
  </navigator>
</view>
<view class="viewName">
  <navigator url="Component/ScrollView/ScrollView">
    <text class="view-Name">Scroll-View展示</text>
  </navigator>
</view>
<view class="viewName">
  <navigator url="Component/Swiper/Swiper">
    <text class="view-Name">Swiper展示</text>
  </navigator>
</view>

然后分开创建三个样式界面:

1.<!--View.wxml-->
<view class="viewTitle">
    <text>View展示</text>
</view>
<!--样式一,横向排列-->
<view class="section">
    <view class="section__title">样式一,横向排列</view>
    <view class="flex-wrp">
        <view class="flex-item bc_green">111</view>
        <view class="flex-item bc_red">222</view>
        <view class="flex-item bc_blue">333</view>
    </view>
</view>
<!--样式二,竖向排列,注意在 .wxml的文件中也可以通过style参数进行样式设计-->

<view class="section">
    <view class="section__title">样式二,竖向排列</view>
    <view class="flex-wrp" style="height:300px">
        <view class="flex-item bc_green" style="margin-top: 0px">111</view>
        <view class="flex-item bc_red" style="margin-top: 100px">222</view>
        <view class="flex-item bc_blue" style="margin-top: 200px">333</view>
    </view>
</view>

其中样式展示中可以相互结合,减少代码量:

/**View.wxss**/
.flex-wrp{
    height: 100px;
    display: flex;
    background-color: #ffffff;
}
/**记住,样式类名之间可以相互搭配使用,这样样式设计时可以减少代码量,
不过这需要好的逻辑设计,如:View.wxml文件中
<view class="flex-item bc_green">111</view>的语句,
就是flex-item与app.wxss中bc_green的结合**/

.flex-item{
    width: 100px;
    height: 100px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
2.<!--ScrollView.wxml-->
<view class="viewTitle">
    <text class="titleName">ScrollView视图展示</text>
  </view>
  <!--样式一,竖向滑动-->
<view class="section">
    <view class="section__title">样式一,竖向滑动Vertical</view>
    <view class="flex-wrp">
    <!--bindscrolltoupper后面的参数可以不写,在.js文件中
    有对应的交互方法-->
      <scroll-view scroll-y="true" style="height: 200px;"
      bindscrolltoupper="upper" bindscrolltolower="lower"
      bindscroll="scroll" scroll-into-view="{{toView}}"
      scroll-top="{{scrollTop}}">
      <!--这里的id用来js中找到对应的显示视图,如果不进行js中data的{{toView}}
      的数据交互,显示的是蓝黄红绿,如果进行js数据交互,那么初始化时显示的是
      最下面的绿-->
        <view id="blue" class="scroll-view-item bc_blue"></view>
        <view id="yellow"  class="scroll-view-item bc_yellow"></view>
        <view id="red" class="scroll-view-item bc_red"></view>
        <view id="green" class="scroll-view-item bc_green"></view>
      </scroll-view>
    </view>
</view>
<!--样式二,横向滑动-->
<view class="section">
    <view class="section__title">样式二,横向滑动Horizontal</view>
    <view class="flex-wrp">
    <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
        <view id="green" class="scroll-view-item_H bc_green"></view>
        <view id="red"  class="scroll-view-item_H bc_red"></view>
        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
        <view id="blue" class="scroll-view-item_H bc_blue"></view>
      </scroll-view>
    </view>
</view>

3.<!--Swiper.wxml-->
  <view class="viewTitle">
    <text class="titleName">Swiper视图展示</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap swiper">
      <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
        autoplay="{{autoplay}}" interval="{{interval}}"
        duration="{{duration}}">
        <block wx:for="{{background}}">
          <swiper-item>
            <view class="swiper-item bc_{{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="btn-area">
      <button type="default" bindtap="changeIndicatorDots">
      显示/取消指示点</button>
      <button type="default" bindtap="changeVertical">
      {{vertical?'横显示':'竖显示'}}</button>
      <button type="default" bindtap="changeAutoplay">
      开始/停止轮播</button>
    </view>
    <slider bindchange="durationChange" value="{{duration}}"
    show-value min="200" max="2000"/>
    <view class="section__title">轮播一次的时间duration</view>
    <slider bindchange="intervalChange" value="{{interval}}"
    show-value min="1000" max="10000"/>
    <view class="section__title">间隔多长时间显示下一个图interval</view>
  </view>

第三个视图展示的交互操作,包含文字显示,点击按钮,滑块操作变化等等:

//Swiper.js
Page({
  data: {
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 3000,
    duration: 1200
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeVertical: function (e) {
    this.setData({
      vertical: !this.data.vertical
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

然后设计过程中,有些样式重复可以在app.wxss中进行样式确定,方便重复调用:

/**这里可以设计所有界面中都包含的控件的公共样式,但是要记住类名要写一致,
否则无法调用,比如下面的类名就是每个页面的标题样式**/

.viewTitle{
    margin-top: 20px;
    height: 40px;
    text-align: center;
}
.bc_green{
    background-color: #09BB07;
}
.bc_red{
    background-color: #F76260;
}
.bc_blue{
    background-color: #10AEFF;
}
.bc_yellow{
    background-color: #FFBE00;
}
.bc_gray{
    background-color: #C9C9C9;
}

还要记住,需要在app.json中添加界面地址,否则会出现跳转失败的问题,而且文件的添加位置,不要写错:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",

    "pages/index/Component/View/View",
    "pages/index/Component/ScrollView/ScrollView",
    "pages/index/Component/Swiper/Swiper"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#FFF0F5",
    "navigationBarTitleText": "组件一介绍:视图控件",
    "navigationBarTextStyle":"black",
    "backgroundColor": "#fbf9fe"
  }
}

效果图展示:

微信小程序基础之试图控件View、ScrollView、Swiper      微信小程序基础之试图控件View、ScrollView、Swiper

微信小程序基础之试图控件View、ScrollView、Swiper         微信小程序基础之试图控件View、ScrollView、Swiper

源码下载,如果源码不能使用的请留言,谢谢~,转载请注明出处,谢谢~:https://github.com/hbblzjy/WXViewScrollSwiperDemo