小程序02

最新推荐文章于 2024-07-13 21:52:23 发布

希望大佬文章可以白嫖

最新推荐文章于 2024-07-13 21:52:23 发布

阅读量85

点赞数

分类专栏：微信小程序文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/shiyibushiwei/article/details/125735190

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

纵向滚动

<!-- scroll-y纵向滚动 -->
<scroll-view class="content" scroll-y>
  <view wx:for="1234567" wx:key="index" class="item">列表0{{item}}</view>
</scroll-view>

.content{
  height: 200rpx;

}
.content .item{
  width: 200rpx;
  height: 100rpx;
  background-color: #5f5;
  border-bottom: 3rpx red solid;
}
/* pages/demo01/demo01.wxss */

movable-view的可移动区域

<movable-area>
        <movable-view 
                      x="{{x}}" y="{{y}}" 
                      direction="all" 
                      out-of-bounds
                      >text</movable-view>
</movable-area>
 <button bindtap="tap" class="page-body-button" type="primary">点击移动到 (30px, 30px)</button>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    x: 0,
    y: 0,
    scale: 2,
  },
    
   tap() {
    this.setData({
      x: 30,
      y: 30
    })
  },
})

图标

<!-- 
      icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear -->
      <!-- icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。 -->
      <!-- icon的颜色，同 css 的color -->

      <!-- 成功 -->
      <icon type="success" size="45"></icon>
      <!-- 提示 -->
      <icon  type="info" size="45" ></icon>
      <!-- 强烈警告 -->
      <icon  type="warn" size="45"></icon>
      <!-- 普通警告 -->
      <icon  type="warn" size="45" color="#C9C9C9"></icon>
      <!-- 等待 -->
      <icon  type="waiting" size="45"></icon>
      
      <!-- 以下在表单中使用的含义 -->
      <!-- 多选控件图标_已选择 -->
      <icon  type="success_no_circle" size="23"></icon>
      <!-- 单选控件图标_已选择 -->
      <icon type="success" size="23"></icon>
      <!-- 多选控件图标_未选择 -->
      <icon class="icon-small" type="circle" size="23"></icon>
        <!-- 下载 -->
      <icon  type="download" size="23"></icon>
      <!-- 错误提示 -->
      <icon  type="warn" size="23"></icon>
      <!-- 搜索 -->
      <icon  type="search" size="23"></icon>
      <!-- 停止或 关闭 -->
      <icon  type="clear" size="23"></icon>
      <icon  type="cancel" size="23"></icon>

进度条

<!-- percent进度条初始百分比0~100 -->
<!-- stroke-width进度条线的宽度 -->
<!-- duration进度增加1%所需毫秒数，和active一起用 -->
<!-- active进度条从左往右的动画 -->
 <!-- border-radius圆角大小 -->
 <!-- show-info在进度条右侧是否显示百分比 -->
<progress percent="4" stroke-width="20" duration="500" active="{{true}}" border-radius="5" show-info="{{true}}" font-size="20" color="#88f" activeColor="#f88" backgroundColor="#8F8" active-mode="forwards" bindactiveend="endd"> 
</progress>

https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

富文本

<!-- 可以把数据中的标签显示出来 -->
<!-- nodes把数据写这里。节点列表/HTML String -->
<!-- space显示连续空格 -->
<rich-text nodes="{{msg}}" space="nbsp"></rich-text>

  msg:"<strong style='color:red' class='fs50'>100       W</strong>",

text文本

<!-- user-select="{{true}}"文本可以复制 -->
<!-- nbsp、ensp、emsp显示空格，空格从小到大 -->
<view><text user-select="{{true}}" space="nbsp">好    卡啊</text></view>
<view><text user-select="{{false}}" space="ensp">好    卡啊</text></view>
<text  space="emsp">好    卡啊</text>

button按钮

按钮样式

<!-- primary绿色 -->
<!-- plain按钮是否镂空，背景色透明 -->
<!-- disabled是否禁用 -->
<!-- loading名称前是否带 loading 图标 -->

<button type="primary" loading="{{true}}" plain="{{false}}" disabled="{{false}}" >按钮</button>

提交和重置按钮

<!-- 提交和重置按钮，在form中使用 -->
<form action="">
  <input type="text" placeholder="请输入用户名" />
    <button form-type="submit">提交按钮</button>
    <button form-type="reset" type="primary">重置按钮</button>
</form>

form表单组件

label多选框

<!-- label多选框，在form中使用 -->
<!-- *this相当于index -->
<form action="">
  <label>
        <checkbox 
                  wx:for="{{items}}"
                  wx:key="*this" 
                  checked="{{item.checked}}">               {{item.name}}</checkbox>
    </label>
</form>

items: [
            {value: 'USA', name: '美国'},
            {value: 'CHN', name: '中国', checked: 'true'},
            {value: 'BRA', name: '巴西', },
            {value: 'JPN', name: '日本'},
            {value: 'ENG', name: '英国'},
            {value: 'FRA', name: '法国'}
          ],

label单选框，使用radio-group包裹

<form action="">
  <radio-group>
        <label 
               wx:for="{{items}}" 
               wx:key="value">
            <radio value="{{item.value}}" checked="{{item.checked}}" />
            {{item.name}}
        </label>
    </radio-group>
</form>

input双向绑定

<input type="text"
       placeholder="用户名"
       value="{{val}}"
       bindinput="getValueFn"/>
<view>{{val}}</view>

data：{
        val:"123344",
} ,

getValueFn(e){
    console.log(11);
    console.log(e.detail.value);
    this.setData({
      val:e.detail.value,
    })
  },

滑动选择器slider

<view>
  <slider min="5" max="55" step="5" value="10" color="#44f" selected-color="#f3f" activeColor="#232" backgroundColor="#895" block-size="10" block-color="#123" show-value="{{true}}" bindchange="changsli"></slider>
</view>

https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

开关选择器switch

<view>
  <switch checked="{{true}}" disabled="{{false}}" type="checkbox" color="#626" bindchange="changswitch"></switch>
</view>

https://developers.weixin.qq.com/miniprogram/dev/component/switch.html

多行文本textarea

<text class="texone"></text>
  <textarea name="" id="texar" cols="10" rows="10" placeholder="{{pla}}" placeholder-style="color:#911" maxlength="-1" auto-focus="{{true}}" focus="{{true}}" auto-height="{{true}}" fixed="{{true}}" bindblur="chta" bindlinechange="chlc" bindinput="bich"></textarea>
</view>

从底部弹起的滚动选择器picker

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

页面跳转

<navigator url="../picker/picker">跳转到picker页面</navigator>
<button bindtap="toPickerFn">点击跳转到picker页面</button>
<navigator url="../home/home" open-type="switchTab">跳转到首页</navigator>
<button bindtap="toHomeFn">跳转到tabbar页面</button>

<!-- navigator 默认只能跳转到非tabbar页面 ，如果想跳转到tabbar页面需要设置open-type属性属性值为switchTab，对应的有一个api wx.switchTab-->

toPickerFn(){
        // 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
        wx.navigateTo({
          url: '../picker/picker',
        })
    },
    toHomeFn(){
      wx.switchTab({
        url: '../home/home',
      })
    },

<button bindtap="goBackFn">返回</button>

   goBackFn(){
        // 返回上一层，但是如果是通过wx.switchTab这个api来跳转的不能返回
        wx.navigateBack({
          delta: 1,
        })
    },

音频

<audio 
       id="myAudio"        		          
   src="https://m701.music.126.net/20220628175502/d6e0b71cbbe600cb5495b4dad6e46847/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/14096412004/9fa2/d449/33b6/f88ff9ed4a6ef5a3a12faadcfd632b30.m4a" 
       controls author="薛之谦" 
       name="演员"            poster="https://p2.music.126.net/qpvBqYIqkRhO9Ry2qOCdJQ==/2942293117852634.jpg?param=130y130" 
       bindtimeupdate="updateAudioFn"></audio>
 
<button type="primary" bindtap="playFn">播放</button>
<button type="warn" bindtap="pauseFn">暂停</button>
<slider value="{{value}}" min="0" max="{{duration}}" bindchange="changeSlideFn"></slider>

Page({

    /**
     * 页面的初始数据
     */
    data: {
        value:0,
        duration:0
    },
    playFn(){
        this.audioCtx.play()
    },
    pauseFn(){
        this.audioCtx.pause()
    },
    updateAudioFn(e){
        console.log(e.detail.currentTime);
        console.log(e.detail.duration);
        this.setData({
            value:e.detail.currentTime,
            duration:e.detail.duration
        })
    },
    changeSlideFn(e){
        console.log(e);
        this.audioCtx.seek(e.detail.value)
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        this.audioCtx=wx.createAudioContext('myAudio')
    },
    
})

希望大佬文章可以白嫖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小程序02

纵向滚动，movable-view的可移动区域，图标，进度条，文档，富文本，text文本，按钮样式，提交和重置按钮，form表单组件，label多选框，单选框，input双向绑定，滑动选择器slider，开关选择器switch，多行文本textarea，从底部弹起的滚动选择器picker，页面跳转，音频...
复制链接

扫一扫