uniapp ios 向左滑动超出 uniapp滑块

转载

网络安全守护神 2024-06-19 19:30:52

文章标签 uniapp ios 向左滑动超出 ico H2 数据 文章分类 iOS 移动开发

今日内容：
	1.组件的使用

一、作业

1.wxml文件

<!-- 开灯关灯 -->
<view>
  <view class="top">
    开灯关灯
  </view>
  <view class="content">
      <view bindtap="_click" data-index="{{ index }}"wx:for="{{ bulds }}" class="content-list">
          <image src="{{ item.src }}"></image>
          <view>{{ item.msg }}</view>
      </view>
  </view>
</view>

2.wxss文件

/*  */
.top{
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding: 20px 0px;
}
.content{
  border: 1px solid #ccc;
  margin-top: 20px;
  padding: 20px 0px;
  display: flex;
  justify-content: space-around;
}
.content image{
  width: 40px;
  height: 40px;
}

.content-list{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

3.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
      bulds:[
        {msg:"on",src:"/imgs/bulb.png"},
        {msg:"on",src:"/imgs/bulb.png"},
        {msg:"on",src:"/imgs/bulb.png"}
      ]
  },

  _click(e){
    // 获取索引
    let index = e.currentTarget.dataset.index;
    // console.log(index)
    //  如果是on则变为off，反之变成on
    this.data.bulds[index].msg = this.data.bulds[index].msg  == "off" ? "on" :"off";
    this.data.bulds[index].src=this.data.bulds[index].src == "/imgs/bulbed.png" ? "/imgs/bulb.png" :"/imgs/bulbed.png";

    this.setData({
      bulds:this.data.bulds
    })
  }
  
})

二、组件的使用

1.基础组件概念

1.1基础组件/拓展组件

什么是组件：

组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。

<tagname property="value">
Content goes here ...
</tagname>

注意：所有组件与属性都是小写，以连字符-连接

1.2公共属性

id、class、style、hidden、data-*、 bind/catch

2.基础内容组件

1.text组件

<!-- 
  text 
  user-select  是否允许文本被 选中
  space  显示连续空格
  decode 是否解码
-->
<text user-select="{{ true }}" space="nbsp">hello         world</text>
<view></view>
<text decode="{{ true }}">hello ">> world!</text>

2.icon组件

<!-- 
  icon
   type  图表的类型
   size   图标大小 默认是23
   color  颜色
 -->
 <icon type="download"></icon>
 <icon type="download" size="40"></icon>
 <icon type="download" size="40" color="red"></icon>

3.rich-text 富文本

对比与vue中的v-html即可

1.字符串类型
<!-- 1.字符串形式 -->
<!-- <div><h2>我是H2标签</h2> </div>  -->
<rich-text nodes="<h2>我是H2标签</h2>"></rich-text>
<rich-text nodes="<div><h2>我是H2标签</h2> </div>"></rich-text>
<rich-text nodes="{{ str }}"></rich-text>


2.数组类型

<!-- 2.数组的形式 -->
<!-- <h2 class="box">我是H2标签</h2> -->
<rich-text nodes="{{ arr }}"></rich-text>

// pages/page01/page01.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      str:"<h2>我是H2标签</h2>",
      // <h2 class="box">我是H2标签</h2> 
      arr:[
        {
          type:"node",  //是一个标签
          name:"h2",  // 标签的名字
          attrs:{  // 标签的属性
            class:"box"
          },
          children:[
            {
              type:"text",
              text:"我是H2标签-数组形式"
            }
          ]
        }
      ]
  },

  
})

3.视图容器

3.1views视图容器

<view class="box" hover-class="active" hover-start-time="1000" hover-stay-time="5000">
</view>

3.2swiper/swiper-item滑块视图容器

（1）基础用法

<!-- 
  swiper  滑块视图容器
    默认的大小 width 整个100%  height  150px
  规定: swiper 的直接子元素，必须是swiper-item
   swiper-item默认的大小是 盛满整个swiper
-->
<swiper class="swiper"
  indicator-dots="{{ true }}"
  indicator-active-color="#fff"
  indicator-color="#000"
  autoplay="{{ true }}"
  interval="1000"
  circular="{{ true }}"
  vertical="{{false}}"
  display-multiple-items="1"
>
  <block wx:for="{{ imgs }}">
    <swiper-item>
      <image src="{{ item }}"></image>
    </swiper-item>
  </block>
  <!-- <swiper-item>
     2
   </swiper-item>
   <swiper-item>
     3
   </swiper-item> -->
</swiper>

（2）封装样式

<!-- 封装 -->
<view class="container">
  <!-- swiper图片内容 -->
  <swiper class="swiper"
    bindchange="_change"
    autoplay="{{ true }}"
    interval="1000"
    circular="{{ true }}"
  >
    <block wx:for="{{ imgs }}">
      <swiper-item>
        <image src="{{ item }}"></image>
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定义dots -->
  <view class="custom-dots">
    <text class="{{ activeIndex == index ? 'active' : '' }}" wx:for="{{ imgs }}"></text>
  </view>

</view>

.swiper image{
  width: 100%;
  height: 150px;
}

.custom-dots text{
  display: inline-block;
  width: 10px;
  height: 5px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-right: 10rpx;
}

.container{
  position: relative;
}
.container .custom-dots{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.container .active{
  border: 1px solid #f00;
}

// pages/page02/page02.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      imgs:[
        "/imgs/1.jpg",
        "/imgs/2.jpg",
        "/imgs/3.jpg",
      ],
      activeIndex:0, //默认是第一张图片
  },
  _change(e){
    console.log(e)
    // detail获取值，是当前组件私有的事件
    let activeIndex = e.detail.current;
    this.setData({
      activeIndex
    })
  }

})

3.3scroll-view可滚动视图区域

(1)竖向滚动

y：

1.给scroll-view加固定的高度

2.scroll-y 为真

<scroll-view class="box" scroll-y="{{ true }}">
    <view class="red">red</view>
    <view class="green">green</view>
    <view class="blue">blue</view>
</scroll-view>

.red{
  width: 300px;
  height: 300px;
  background-color: red;
}
.green{
  width: 300px;
  height: 300px;
  background-color: green;
}
.blue{
  width: 300px;
  height: 300px;
  background-color: blue;
}

.box{
  height: 400px;
  width: 300px;
}

(2)横向滚动

1.scroll-x 为真

2.给子元素设置行内的块状效果，父元素不能换行

<scroll-view class="box" scroll-x="{{ true }}">
    <view class="red">red</view>
    <view class="green">green</view>
    <view class="blue">blue</view>
    <view>删除</view>
</scroll-view>

.red{
  width: 300px;
  height: 100px;
  background-color: red;
}
.green{
  width: 300px;
  height: 100px;
  background-color: green;
}
.blue{
  width: 300px;
  height: 100px;
  background-color: blue;
}

.box{
  height: 100px;
  width: 100%;
  white-space: nowrap;  //   父元素不能换行
}

.box view{
  display: inline-block;  // 子元素行内块状元素
}

(3)demo

<!-- 案例 -->
<view class="category">
    <!-- 一级分类 -->
    <scroll-view class="category-l" scroll-y="{{ true }}">
      <block wx:for="{{ firstCate }}">
        <view bindtap="_active" data-id="c{{ index}}">
          {{ item.name }}
        </view>
      </block>
    </scroll-view>
    <!-- 二级分类 -->
    <scroll-view  class="category-r" scroll-y="{{ true }}" scroll-into-view="{{cateid}}"> 
      <block wx:for="{{ secondCate }}" wx:for-item="val">
        <view class="father" id="c{{ index }}">
           <block wx:for="{{ val }}">
             <view>
                {{ item.name }}
             </view>
           </block>
        </view>
      </block>
    </scroll-view>
</view>

/* 案例 */
.category{
  display: flex;
  height: 280px;
}

.category-l{
  flex: 1;
  /* border: 1px solid #f00; */
  height: 100%;
}
.category-r{
  flex: 3;
  height: 100%;
}

.category-l  view{
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  line-height: 40px;
  text-align: center;
}

.father{
  width: 100%;
  height: 160px;
  background-color: lightcoral;
  margin-bottom: 10px;
}

page({
	data:{
	 	cateid:"c0",
	 	firstCate:[
            {id:"c01",name:"电视"},
            {id:"c02",name:"手机"},
            {id:"c03",name:"电脑"},
            {id:"c04",name:"冰箱"},
            {id:"c05",name:"洗衣机"},
            {id:"c06",name:"空调"},
            {id:"c07",name:"热水箱"},
            {id:"c08",name:"热水器"},
          ],
         secondCate:[
            [
              {id:"u01",name:"小米电视"},
              {id:"u02",name:"海尔电视"},
              {id:"u03",name:"华为电视"},
            ],
            [
              {id:"u01",name:"小米手机"},
              {id:"u02",name:"海尔手机"},
              {id:"u03",name:"华为手机"},
            ],
        ]
	},
	_active(e){
     let cateid = e.currentTarget.dataset.id;
     console.log(cateid)
    this.setData({
      cateid,
    })
  }
})

4.表单组件

4.1input组件

type：键盘类型默认 text 文本输入

双向数据绑定：

vue 中 v-model

小程序： model:属性

<view class="container">
  <view class="title">
    请填写一下信息
  </view>
  <view class="name">姓名：</view>
  <input class="username" bindinput="_input" placeholder="输入姓名" type="text" />

  <view class="name">联系方式:</view>
  <input class="username" model:value="{{ val }}" type="number" placeholder="输入联系方式" type="text" />

  <view class="name">密码:</view>
  <input class="username" maxlength="5" password type="number" placeholder="输入密码" type="text" />
</view>

<button bindtap="_search">搜索</button>

<view class="container">
  <form bindsubmit="_formSubmit">
    <view class="title">
      请填写一下信息
    </view>
    <view class="name">姓名：</view>
    <input class="username" name="username" bindinput="_input" placeholder="输入姓名" type="text" />

    <view class="name">联系方式:</view>
    <input class="username" name="phone" model:value="{{ val }}" type="number" placeholder="输入联系方式" type="text" />

    <view class="name">密码:</view>
    <input class="username" name="pass" maxlength="5" password type="number" placeholder="输入密码" type="text" />
    <view class="name">您的性别是:</view>
    <radio-group bindchange="_radioChange" name="sex">
      <radio value="m" checked>男</radio>
      <radio value="w" color="red">女</radio>
      <radio value="n">保密</radio>
    </radio-group>
    <view class="name">您的爱好是:</view>
    <checkbox-group bindchange="_checkboxChange" name="hobby">
      <checkbox value="游戏">游戏</checkbox>
      <checkbox value="睡觉">睡觉</checkbox>
      <checkbox value="吃饭" checked>吃饭</checkbox>
      <checkbox value="学习" color="red">学习</checkbox>
    </checkbox-group>
    <view class="name">您是否同意我们联系您本人:</view>
    <!-- <switch bindchange="_switchChange" type="switch"></switch> -->
    <switch name="isAgree" bindchange="_switchChange" type="checkbox"></switch>
    <view>您的地址是：{{ region }}</view>
    <picker mode="region" bindchange="_pickerChange" name="region">
      选择：
    </picker>
    <button type="primary" form-type="submit" size="default">提交</button>
    <button type="warn" form-type="reset" size="default">重置</button>
  </form>
</view>

// pages/page03/page03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:"",
    val:"",
    region:[],
  },
  // 键盘输入
  _input(e){
    // console.log(e.detail.value)
    // this.data.msg = e.detail.value
    // this.data.val = e.detail.value
    this.setData({
      val:e.detail.value
    })
  },
  // 搜索
  _search(){
    // console.log(this.data.msg)
    // 发起数据请求
    console.log(this.data.val)
  },
  // 单选按钮发生改变
  _radioChange(e){
    console.log(e)
  },
  // 多选按钮
  _checkboxChange(e){
    console.log(e)
  },
  // 开关选择器
  _switchChange(e){
    console.log(e)
  },
  _pickerChange(e){
    // console.log(e)
    this.setData({
      region:e.detail.value
    })
  },
  // 表单提交
  _formSubmit(e){
    console.log(e)
  }
  
})

注意事项：

表单提交，使用form，给button设置 form-type属性，值是submit 是提交，值为reset时候是重置
当点击按钮的时候，会触发 form表单的 bindsubmit及bindreset事件
做表单提交，要加name作为key

5.导航组件

5.1组件navigator

url： 跳转的地址
target： 跳转的方式  self  miniprogram
open-type：如何跳转
	navigate： 
		保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
	redirect：
		关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
	
	switchTab：
		跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
	
	reLaunch：
		关闭所有页面，打开到应用内的某个页面
	navigateBack：
		关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

<navigator
  target="self"
  open-type="navigate"
  url="../page03/page03"
>
  <button>跳转page03-navigate</button>
</navigator>
<navigator
  target="self"
  open-type="redirect"
  url="../page03/page03"
>
  <button>跳转page03-redirect</button>
</navigator>
<navigator
  target="self"
  open-type="switchTab"
  url="../index/index"
>
  <button>跳转index-switchTab</button>
</navigator>
<navigator
  target="self"
  open-type="reLaunch"
  url="../page03/page03"
>
  <button>跳转index-reLaunch</button>
</navigator>

5.2路由api

<!-- 使用api进行跳转 -->

<button bindtap="_toPage03" type="warn">路由跳转api</button>

_toPage03(){
    // 使用api进行跳转
    // wx.navigateTo({
    //   url: '../page03/page03',
    // })

    // wx.redirectTo({
    //   url: '../page03/page03',
    // })

    wx.switchTab({
      url: '../index/index',
      success(res){
        console.log(res)
      }
    })
  }

5.3传递参数/接收参数

1.传递参数
<navigator
  target="self"
  open-type="navigate"
  url="../page03/page03?id=100&name=lisi"   //在url地址上进行拼接
>
  <button>跳转page03-navigate</button>
</navigator>


js文件：
let name="admin",age=30;
wx.navigateTo({
	url: `../page03/page03?name=${name}&age=${age}`,
})


2.接收参数

	在目标页面，onLoad生命周期函数中，进行获取参数
     onLoad(option){
        console.log(option)
      },

特殊情况：
	switchTab  不能携带参数

5.4跳转到其他小程序

<navigator target="miniProgram" app-id="wx8fc369471215e8ae" >
  <button>跳转到其他小程序</button>
</navigator>

三、模块化操作

1.commonjs规范

模块文件：config.js

const  url="http://localhost";
const  port = 3000;

// commonjs

module.exports = {
  url,port
}

页面的js文件

// pages/page04/page04.js
// commonjs导入
let  config = require('../../utils/config');
console.log(config)

2.ES6规范

模块文件：

const  url="http://localhost";
const  port = 3000;
// es6

// export {
//   url,port
// }

export  default {
  url,port
}

页面js

// es6 导入
// import {url,port}  from  "../../utils/config"

import  config   from  "../../utils/config"

console.log(config)
// console.log(url,port)

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：ios framework嵌套framework ios framework制作

下一篇：Phoenix OS镜像文件镜像文件系统

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

uniapp ios 向左滑动超出 uniapp滑块

uniapp ios 向左滑动超出 uniapp滑块

一、作业

1.wxml文件

2.wxss文件

3.js文件

二、组件的使用

1.基础组件概念

1.1基础组件/拓展组件

1.2公共属性

2.基础内容组件

1.text组件

2.icon组件

3.rich-text 富文本

3.视图容器

3.1views视图容器

3.2swiper/swiper-item滑块视图容器

（1）基础用法

（2）封装样式

3.3scroll-view可滚动视图区域

(1)竖向滚动

(2)横向滚动

(3)demo

4.表单组件

4.1input组件

5.导航组件

5.1组件navigator

5.2路由api

5.3传递参数/接收参数

5.4跳转到其他小程序

三、模块化操作

1.commonjs规范

2.ES6规范

51CTO博客