小程序UI与容器组件

编程之家收集整理的这篇文章主要介绍了小程序UI与容器组件编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

目录1.总结与概述2.容器组件2.1 组件容器(view)2.2可滚动视图容器(scroll-view)2.3 滑块视图容器(swiper)1.总结与概述1.1 UI组件总结图1.2 概述 小程序的UI组件也就是定义用户界面的一系列标签,类似于html标签。一个完...

目录

    1.总结与概述
    2.容器组件
            2.1 组件容器(view)
            2.2 可滚动视图容器(scroll-view)
            2.3 滑块视图容器(swiper)
1.总结与概述


1.1 UI组件总结图


1.2 概述

        小程序的UI组件也就是定义用户界面的一系列标签,类似于html标签一个完整用户响应过程:事件触发——>UI组件接收到事件——>触发js函数响应事件——>更新UI

 

 2.容器组件

 

2.1 容器组件(view)

    (1)总结

(2)例子

        效果

 page.wxml

<view>
    <text class="row-view-title">水平布局:</text>
    <view class="flex-wrp-row">
        <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text">red</text></view>
        <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view>
        <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view>
    </view>
</view>
<view>
    <text class="column-view-title">垂直布局:</text>
    <view class="flex-wrp-column" >
        <view class="flex-item-red" hover="true" hover-class="hover-style"><text class="color-text" >red</text></view>
        <view class="flex-item-green" hover="true" hover-class="hover-style"><text class="color-text">green</text></view>
        <view class="flex-item-blue" hover="true" hover-class="hover-style"><text class="color-text">blue</text></view>
    </view>
</view>

  page.wxss

.flex-item-red{
    background-color: red;
    height: 200rpx;
    width: 200rpx;
    text-align: center;
    line-height: 200rpx;
}
.flex-item-green{
    background-color: green;
    height: 200rpx;
    width: 200rpx;
    text-align: center;
    line-height: 200rpx
}
.flex-item-blue{
    background-color: blue;
    height: 200rpx;
    width: 200rpx;
    text-align: center; 
    line-height: 200rpx  
}
.flex-wrp-row{
    flex-direction: row;
    display: flex;
    margin-left: 10rpx;
    margin-top: 20rpx;
}
.flex-wrp-column{
    flex-direction: column;
    display: flex;
    margin-left: 10rpx;
     margin-top: 20rpx;
}
.color-text{
    color: sNow;
    font-family: 'Times New Roman',Times,serif;
    font-weight: bold;
}
.hover-style{
    background-color: black;
}
.row-view-title,.column-view-title{
    margin-left: 20rpx;
    font-family: 'Times New Roman',serif;
    font-weight: bold;
}
/*重要属性:
    display: flex; //与display:Box;是类似,是flexBox的最新语法格式,有更好的适配效果
    flex-direction: column;  //表示子布局垂直布局
    flex-direction: row;  //表示子布局为水平布局
*/

2.2 可滚动视图容器(scroll-view)

    (1) 总结

  (2) 例子

       效果图:

  page.wxml

<view>
<text>水平滚动布局</text>
</view>
<view class="x-view">
  <scroll-view class="scroll-view-x" scroll-x="true" bindscrolltoupper="scrollXToUpper" bindscrolltolower="scrollXToLower" bindscroll="scroll" scroll-left="0" scroll-into-view="{{green}}">
      <view id="green" class="x_green"></view>
      <view id="red"  class="x_red"></view>
      <view id="yellow" class="x_yellow"></view>
      <view id="blue" class="x_blue"></view>
  </scroll-view>
</view>
<view>
<text>垂直滚动布局</text>
</view>
<view class="y-view">
  <scroll-view class="scroll-view-y" scroll-y="true" bindscrolltoupper="scrollYToUpper" bindscrolltolower="scrollYToLower" bindscroll="scroll" scroll-top="0" scroll-into-view="{{green}}">
      <view id="green" class="y_green"></view>
      <view id="red"  class="y_red"></view>
      <view id="yellow" class="y_yellow"></view>
      <view id="blue" class="y_blue"></view>
  </scroll-view>
</view>

 page.wxss

.x_green{
    background-color: green;
    width: 500rpx;
    height: 300rpx;
    display: inline-flex;
}
.x_red{
    background-color: red;
    width: 500rpx;
    height: 300rpx;
    display: inline-flex;
 
}
.x_blue{
    background-color: blue;
    width: 500rpx;
    height: 300rpx;
    display: inline-flex;  
}
.x_yellow{
    background-color: yellow;
    width: 500rpx;
    height: 300rpx;  
    display: inline-flex;  
}
.y_green{
    background-color: green;
    width: 100%;
    height: 300rpx;
}
.y_red{
    background-color: red;
    width: 100%;
    height: 300rpx;
}
.y_yellow{
    background-color: yellow;
    width: 100%;
    height: 300rpx;
}
.y_blue{
    background-color: blue;
    width: 100%;
    height: 300rpx;
}
.scroll-view-x{
    display: flex;
    white-space: Nowrap;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 10px; 
    height: 300rpx; 
}
.scroll-view-y{
    height: 400rpx;
}
/*重要属性:
    white-space: Nowrap;//设置内部元素不换行显示,与display: inline-flex;属性联合使用才会有水平布局的效果
*/

    page.js

//index.js
//获取应用实例
var app = getApp()
//var color_index=['green','red','yellow','blue'];
Page({
  data:{
    toview:'red',},/*滑动到左边触发*/
scrollXToUpper:function(){
  console.log('scrollXToUpper')
},/*滑动到右边触发 */
scrollXToLower:function(){
   console.log('scrollXToLower')
},/*滑动到顶部触发*/
scrollYToUpper:function(){
   console.log('scrollYToUpper')
},/*滑动到左边触发 */
scrollYToLower:function(){
   console.log('scrollYToLower')
},/*滑动触发 */
scroll:function(){
   console.log("scroll")
},onLoad: function () {
    console.log('onLoad')
    var that = this
  },})

2.3 滑块视图容器(swiper)

 

 (1)总结

(2)例子

    效果图:

  page.wxml

<swiper data-current="0" current="0" bindchange="itemChangeFunc" circular="true" indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgurls}}" wx:key="swiperkeys">
        <swiper-item>
        <image src="{{item}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
    </block>
</swiper>

 page.js

//game.js
Page({
  data: {
    imgurls: [
      '/image/wechat.png','http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg','http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg','http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],indicatorDots: true,autoplay: true,interval: 3000,duration: 1000,current:1,durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  },itemChangeFunc:function(e){
 // console.log(e.target.dataset.current)
  
  console.log(e.detail)
}
})

参考链接https://mp.weixin.qq.com/debug/wxadoc/dev/component/

总结

以上是编程之家为你收集整理的小程序UI与容器组件全部内容,希望文章能够帮你解决小程序UI与容器组件所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

猜你在找的微信小程序相关文章

1、先开发小程序,小程序需要有亮点,毕竟新颖(这样别人才更好去点击查看)2、条件是独立访客(UV)不低于1000,1000人说多不多,说少也不少,因为小程序是没有链接的,是不可以进行一个流量刷取的,独立访客是需要1000个实实在在的用户,并不是访问量。3、开发好小程序之后,自己要为自己宣传,前提小程序需要做的完美,小程序一定要做分享功能,将小程序分享到个人、微信群、朋友圈,这样估计很容...
WXSS(WeiXin Style Sheet)与CSS对应,用于描述页面的样式。特性内联样式:组件的 style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染速度。选择器对于常用的选择器,目前支持的选择器有:注:绿色背景色行表示官方文档中没有说明,但经个人亲测后确定也支持的选择器。目前不支持的选择器有:注意:如...
微信开发者工具的快捷键微信开发者工具的所有快捷键
注册小程序帐号在微信公众平台官网首页(mp.weixin.qq.com)点击右上角的“立即注册”按钮。选择注册的帐号类型显示了4选项,我们现在是注册小程序,所以选择小程序填写邮箱和密码请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。激活邮箱登录邮箱,查收激活邮件,点击激活链接。填写主体信息点击激活链接后,继续...
由于小程序只提供了我们一个获取地理位置、速度的api,并没有获取的相关地位位置的信息等等,因此我们还需要借助一些第三方的api来实现下面,介绍使用百度地图的api来获取地位位置的信息。1&gt; 第一步:先到百度开放平台http://lbsyun.baidu.com申请akhttp://lbsyun.baidu.com/index.php?title=wxjsapi/guide/...
之前已经介绍过,如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置: 微信小程序教程系列15下面介绍使用百度api来获取天气信息。1&gt; 第一步:先到百度开放平台http://lbsyun.baidu.com申请akhttp://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key申请到ak后,在我的应用...
微信小程序框架为开发者提供了一系列的组件和API接口。组件主要完成小程序的视图部分,例如文字、图片显示。API主要完成逻辑功能,例如网络请求、数据存储、音视频播放控制,以及微信开放的微信登录、微信支付等功能。组件官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/对于开发文档,个人建议先了解其整体框架,了解其提供了哪些组...
前言:很久之前就说小龙叔要出个小程序,那个时候刚在学习Android原生开发,当时觉得Native APP还是无可替代的,不管是用户体验还是功能扩展都无法与Native APP比,并且也没多少人会愿意舍弃成为独立流量入口的机会不做而去选择受限于微信的小程序,同时还增加了用户停留微信的时常,增加了微信的用户活跃度。现在想想我真的太年轻,其实微信小程序还是有很大的用武之地的,让我...
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注