小程序学习笔记03（零基础玩转小程序）--常用组件view，text，image，swiper，navigator，richtext，button，icon，radio，checkbox

最新推荐文章于 2024-06-01 15:15:00 发布

心湖中的石子

最新推荐文章于 2024-06-01 15:15:00 发布

阅读量275

点赞数

分类专栏：微信小程序学习笔记

本文链接：https://blog.csdn.net/weixin_43745804/article/details/109696889

版权

微信小程序学习笔记专栏收录该内容

10 篇文章 2 订阅

订阅专栏

1、常用组件–view

view组件的hover-class属性
wxml文件

<view hover-class="myhover">here is some text of mine</view>

wxcc文件

view{
  font-size:2em;
  width: 700rpx;
  height: 300rpx;
  border: 1rpx solid black;
}

.myhover{
  color: blue;
}

在这里插入图片描述

2、常用组件–text

长按可复制

3、常用组件–image

默认尺寸320*240
wxss文件

image{
  width: 140px;
  height: 140px;
  border:1px solid gray;
}

也可以设置更大的尺寸，然后设置响应的mode

image{
  width: 240px;
  height: 140px;
  border:1px solid gray;
}

wxml文件

<image mode="aspectFit" src="../../images/dress11.png"/>
<image mode="scaleToFill" src="../../images/dress11.png"/>

小程序中的图片，直接就支持懒加载，使用lazy-load属性，当图片出现在视口，上下屏三屏之内的时候，自己开始加载图片

4、常用组件–swiper，swiper-Iitem

轮播图的外层容器swiper
每个轮播项为swiper
swiper标签存在默认样式，width为100%，height为150px
swiper标签高度无法实现由内容撑开，只能先找原图的宽高，等比例指定给swiper的宽高
autoplay自动轮播
interval修改轮播时间
circular 衔接轮播
wxss文件

swiper{
  width: 400px;
  height: 300px;
}

wxml文件

<swiper autoplay="true" interval="1000" circular="true" indicator-dots="true" indicator-color="red" indicator-active-color="blue">
  <swiper-item><image mode="scaleToFill" src="../../images/gril02.jpg"/></swiper-item>
  <swiper-item><image src="../../images/gril03.jpg"/></swiper-item>
  <swiper-item><image src="../../images/gril04.jpg"/></swiper-item>
  <swiper-item><image src="../../images/gril05.jpg"/></swiper-item>
</swiper>

5、常用组件–navigator

url要跳转的页面路径，可绝对可，课相对
target，跳转到当前小程序还是其他小程序页面，self默认为自己，miniprogram为其他小程序
open-type跳转的方式

navigate 默认值，保留当前页面，跳转到应用内的某个页面，但不能调到tabbar页面
redirect 关闭当前页，跳转到应用内的某个页面，但不允许跳转到tabbar页面。
switchtab跳转到tabar页面，并关闭其他所有非tabbar页面

<navigator url="/pages/index/index">跳转到首页</navigator>

5.1、页面间通过连接直接传值

使用onload的options参数获取页面通过?号传递过来的值

原连页面wmxl文件

<!--pages/navigator/naviagtor.wxml-->
<view>
  <navigator url="../news/news?name=zhangsan&age=30">
   张三
  </navigator>
  <navigator url="../news/news?name=lisi&age=20">
   李四
  </navigator>
</view>

目标页面js文件

  onLoad: function (options) {
    console.log(options);
  },

如果连接上加上redirect属性则不会出现返回按钮

  <navigator url="../news/news?name=zhangsan&age=30">

通过hover-class选择符，设定选择状态的样式，有点类似于：hover伪类

xml文件

<view>
  <navigator url="../news/news?name=zhangsan&age=30">
   张三
  </navigator>
  <navigator hover-class="myhover" url="../news/news?name=lisi&age=20">
   李四
  </navigator>
</view>

wxss文件

/* pages/navigator/naviagtor.wxss */
.myhover{
  color: red;
}

5.2、通过脚本跳转连接

wxml文件

<!--pages/navigator/naviagtor.wxml-->
<view>
  <button bindtap="jump">跳转</button>
</view>

js文件

jump(){
    wx.navigateTo({
      url: '../news/news',
      success(){
         console.log('sucessfully jump to news'); 
      },
      fail(){
        console.log('wrong url'); 

      },
      complete(){
        console.log('are u ok');
      }

    })
  },

使用redirectTo方法也可以，同样也没有返回按钮

  jump(){
    wx.redirectTo({
      url: '../news/news',
      success(){
        console.log('successful');
      },
      fail(){
        console.log('fail to redirect');
      },
      complete(){
        console.log('are u ok');
      }
    })
  },

5.2、navigateBack返回上一级导航

上例在目标页添加一个按钮

  goback(){
    wx.navigateBack({
      //默认返回上一页
      delta: 0,//返回的页数，如果delta的数值过大，默认返回最开始的页面。
    })
  },

6、常用组件–richtext富文本标签

可以将字符串解析成对应标签，类似vue中v-html功能

nodes属性来实现
接受标签字符串，直接传入已经写好的html代码
接受对象数组

js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    myitem:{
      index:0,
      msg:'this is my message to show',
      time:'2020-11-13'
    },
    html:'<div class="nav"><div class="wrap"> <a href="/" class="logo fl"></a><ul class="fl"><li class="on"><a href="/">首页</a></li><li class="oth"><a href="/win7/">Windows 7</a></li> </ul></div></div>'

  }）

wxml文件

<rich-text nodes="{{html}}"></rich-text>

则直接显示html对应的网页内容

7、常用组件–button按钮

size：按钮大小，default，mini小尺寸
type：用来控制按钮的颜色，default：灰，primary：green，warn：红色
plain：按钮是否镂空
disabled：禁用
loading：是否加等待图标

<button>默认按钮</button>
<button size="mini">默认按钮</button>
<button type="warn">默认按钮</button>
<button plain="true">默认按钮</button>
<button disabled="true">默认按钮</button>
<button loading="true">默认按钮</button>

open-type开放能力
contact：打开客服
share：分享到微信朋友，不能分享到朋友圈
getPhoneNumber：获取手机号，绑定一个事件，不是企业的小程序账号，没有权限来获取用户的手机号码，获取到的信息加密过，需要自己的后台服务器，在后台服务器中进行解析
getUserInfo：获取用户信息，也需要绑定一个事件，启动一个回调函数。方法他那个getphonenumber
launchApp：启动app。需要在app中，通过app的某个连接打开小程序，在小程序中在通过这个功能重新卡开app。（受很大局限）
openSetting：打开授权设置
feedback：打开反馈
js文件：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    myitem:{
      index:0,
      msg:'this is my message to show',
      time:'2020-11-13'
    },
    
  },
  
  showme:function (e) {
    console.log(e);
  }）

wxml文件

<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getphone">getPhoneNumber</button>
<button open-type="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

8、常用组件–icon标签

type
图标的类型，有如下类型
success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size
图标的大小，
color
图标的颜色

<icon type="success"></icon>

9、常用组件–radio单选按钮，radio-group单选按钮组

radio单选框必须和父元素radio-group来使用
value选中的单选框的值
js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender:"待显示的值"
  },
  judgegender(e) {
    //获取radio的值
    var Regender=e.detail.value;
    //将值赋值给data中的gender
    this.setData({
      gender:Regender
    })
  }）

wxml文件

<radio-group bindchange="judgegender">
  <radio value="male"></radio>男
  <radio value="female"></radio>女
</radio-group>
<view>您选中的是：{{gender}}</view>

10、常用组件–checkbox复选框

checkbox单选框必须和父元素checkbox-group来使用，可以选中多个
js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    fruits:[
      {id:0,name:"香蕉",value:"banana"},
      {id:1,name:"葡萄",value:"grape"},
      {id:2,name:"哈密瓜",value:"hamigua"},
      {id:3,name:"火龙果",value:"huolongguo"}
    ],
    checkedlist:[],
  },
  judgefruit(e) {
    //获取checkbox的值
    const clist=e.detail.value;
    //将值赋值给data中的gender
    this.setData({
      checkedlist:clist
    })
  })

wxml文件

<view>
  <checkbox-group bindchange="judgefruit">
    <checkbox wx:for="{{fruits}}" wx:key="id" value="{{item.value}}">{{item.name}}</checkbox>
  </checkbox-group>
</view>
<view>您选中的是：{{checkedlist}}</view>

心湖中的石子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
小程序学习笔记03（零基础玩转小程序）--常用组件view，text，image，swiper，navigator，richtext，button，icon，radio，checkbox

1、常用组件–viewview组件的hover-class属性wxml文件<view hover-class="myhover">here is some text of mine</view>wxcc文件view{ font-size:2em; width: 700rpx; height: 300rpx; border: 1rpx solid black;}.myhover{ color: blue;}2、常用组件–text长按可复制
复制链接

扫一扫