gyueh的博客

换行以往的<br/>标签不能发挥效用在<text>标签里加上\n可以实现换行<text>第一行\n第二行\n第三行</text><text>第一行第二行第三行</text>最终效果：单个空格无论添加多少个<b标签不能发挥效用在<view>标签里加上\t可以实现<view>南\t半球 \t\t 与\t北海道</view>在<text&gt

目的：复选框未选中时，提交按钮为不可点击状态；复选框选中时，提交按钮为可点击状态复选框未选中时复选框选中时wxml代码如下：<view class="bottom"> <view style="color:#999999;text-align:center;padding-bottom: 30rpx;"> <checkbox-group bindchange="checkboxChange"> <label class="ch

需求：wx.showToast显示成功后返回上一级页面微信小程序返回上一级页面，代码如下：wx.navigateBack({ delta: 1})微信小程序wx.showToast延时跳转页面，代码如下:wx.showToast({ title: '成功', icon: 'success', duration: 2000, success: function () { setTimeout(function () { //要延时执行的代码

第一种：bindsubmit方法注意*：1.使用form里面定义bindsubmit事件2.bindsubmit事件需要配合button里面定义的formType="submit" 操作3.设置input的name值来获取对应的数据wxml代码如下：<form bindsubmit="formSubmit"> <input type="text" name="name" class="content" placeholder="请输入司机姓名" /> <in

List item// 加载信息loadInfo: function() { let that = this let url = 'https://api.apiopen.top/getJoke?page=1&count=10' wx.request({ url: url, method: 'GET', dataType: 'json', header: { 'content-type': 'application/json' // 默认值 }.

带参数跳转页面目的：实现页面A带参跳转页面B，并在页面B中获取到相应的参数A页面--------获取id、name值并跳转页面// demo.jsgotoB() { let project_id = e.target.dataset.id; let project_name = this.data.userName; wx.navigateTo({ url: './add/add?id=' + project_id + '&name=' + project_

在地址列表中进行地址选择，且只能选中其中一个地址wxml代码如下:<radio-group bindchange="radioChange"> <label class="list" wx:for="{{array}}" wx:key="id"> <view class="weui-cell__bd">{{item.address}}</view> <view class="weui-cell__ft"> &

wxml部分代码如下:<view class="wehx-card_goods" wx:for="{{list}}" wx:key="*this"> <image class="goods_img" src="{{item.url}}" data-src="{{item.url}}" bindtap="previewImage"></image></view>js部分代码如下: data: { list: [{ name: '商

报错：解决方法：调试基础库调回2.14.4，操作如图所示：

用户点击右上角收藏真机操作如图：点击收藏后，触发收藏事件js部分代码如下所示：onAddToFavorites: function (res) { console.log('触发收藏事件-----') return { title: '这是一条消息',//自定义转发标题 // imageUrl: '',// 自定义图片路径 query: 'name=xxx&age=xxx',//当前页面路径中的参数 } }注意..

1.点击右上角转发菜单实现转发/分享点击右上角胶囊按钮的转发菜单2.点击’转发’3. 最终效果如图所示:wxml部分代码如下:<text>hello world!</text>js部分代码如下:onShareAppMessage: function (res) { console.log(res.from) return { title: '标题标题标题',//自定义转发标题 path:'/pages/home

要求:1.使页面某一区域始终显示在页面的最顶端2.页面流畅不卡顿初始效果如图：wxml部分代码如下:<view class="search">搜索框</view><view class="banner">banner</view><view class="content"> <view class="item" wx:for="{{arry}}">我是内容{{item}}</view></vi

要求：1.按钮始终居底显示2.吸底按钮区能适配各类手机wxml部分代码如下：<view class="bottom" > <button>按钮</button></view>wxss部分代码如下：.bottom { padding-top: 20rpx; padding-bottom: calc(70rpx + env(safe-area-inset-bottom));//适配 padding-bottom: calc(7

本地资源图片无法通过 WXSS 获取，可以使用网络图片、 base64、或使用<image/>标签1.wxml文件中背景图片的使用:在最外的父元素使用background-image引入<view style="background-image: url('../images/文件');height:500px;">111111</view>2. wxss文件中背景图片的使用:使用网络图片或者base64格式的图片background-image: url(

wxml代码如下：<view class='notable-container'> <view class="words"> 这是一条滚动的字幕这是一条滚动的字幕这是一条滚动的字幕这是一条滚动的字幕这是一条滚动的字幕 </view></view>css代码如下：.notable-container { width: 100%;}.notable-container .words { font-size: 10pt;

组件<switch checked="{{switchChecked}}" color="#2ea7e0" bindchange="" />方案一：通过transform中的缩放属性改变组件大小.wx-switch-input{ transform:scale(0.8) !important;}方案二：通过原生组件的类名改变组件大小 .wx-switch-input { width: 102rpx !important; height: 60rpx !import

需求：点击获取按钮进入60秒倒计时,倒计时结束前按钮禁用；倒计时结束后按钮的内容文字恢复正常，按钮状态恢复正常。wxml部分代码如下：<button class="sendBtn" disabled='{{disabled}}' bindtap="getCountDown">{{sendMessage}}</button>js部分代码如下：data: { sendMessage: "重新发送",//按钮的默认文字内容 countTime: 60,//倒计时

wxml部分代码如下：<view class="bottom" style="top:{{top}}"></view>js部分代码如下： data: { top: '', },onReady: function () { let query = wx.createSelectorQuery(); query.select('.top').boundingClientRect(rect => { //获取到元素 let

目的：折叠面板默认显示其中一项，利用toggle实现元素的显示和隐藏例如：页面中有四个可折叠元素，默认元素1显示，其余项目内容隐藏；当点击元素2时，元素2显示，其余项目内容隐藏。初始效果如图：wxml部分代码如下：<view class='item' wx:for="{{items}}" wx:key="index"> <view class='title' data-index="{{index}}" bindtap='panel'> {{item.title}

新建组件：在component下新建一个tabBar组件中的index.wxml结构如下：<cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-inde.

新建组件：在component下新建一个tabBar在组件的index.wxml中写如下代码：<cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-in.

新建组件：在component下新建一个tabBar组件的index.wxml结构如下：<cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index.

解决方法view{ word-break: break-all }

目的：折叠面板默认不显示。点击哪个元素让哪个元素显示，再次点击时当前元素隐藏且不影响其他元素的效果。wxml部分代码如下：<view class="wehx-card_box" wx:for="{{array}}" wx:key="index" data-id="index"> <view class="wehx-flex_top"> <label class="weui-cell__hd wehx-title_blue" bindtap="checkRoles"&g

在components文件夹下新建一个名称为tabNormal的文件夹，结构如图：tabNormal组件的index.wxml代码如下：<view class="tab" style="position:fixed;left:0;top:{{positionTop}}"> <view wx:for="{{tabTitle}}" wx:key="{{index}}" class="wehx-tabItem {{current==index?'active':''}}" bindt.

app.json//引入weui库 "useExtendedLib": { "kbone": true, "weui": true }index.wxml<view class="{{tabbarIndex == 0 ? 'show':'hidden'}}">tab1内容</view><view class="{{tabbarIndex == 1 ? 'show':'hidden'}}">tab2内容</view><mp

通过 useExtendedLib 扩展库 的方式引入weui组件库//在项目的app.json文件中写入以下代码"useExtendedLib": { "kbone": true, "weui": true }weui组件库引入后，即可使用相应的weui样式或者组件

通过 useExtendedLib 扩展库 的方式引入weui组件库//在项目的app.json文件中写入以下代码"useExtendedLib": { "kbone": true, "weui": true }在目标页面的 json 文件加入 usingComponents 配置字段//如下所示：//mp-dialog是命令的组件名称，使用时直接用以组件名称开头的标签即可{ "navigationBarTitleText": "账单", "usingCom.

需求：进入优惠券选择页面，默认一个也不选择，在进行选择的时候只能选中一个。wxml部分代码如下：<view class="page"> <view class="page__bd"> <radio-group bindchange="radioChange"> <label wx:for="{{items}}" wx:key="{{item.value}}"> <view class="wehx-card_box wehx-t

需求：点击页面上的某一个按钮，弹出可供选择的其他按钮。页面初始效果：wxml部分代码如下所示：<view class="drawer_screen" bindtap="showOrHide" wx:if="{{isShow}}" catchtouchmove="true"></view><view> <image src="../../images/tell.png" class="buttom" animation="{{animDelLots}}

需求：进入页面后首先看到banner布局，然后是tab切换栏以及页面内容，当页面滚动到一定距离后，tab切换栏始终固定在顶部wxml部分代码如下：<!--pages/test/test.wxml--><view style="padding-bottom:30rpx;position:fixed;top:0;width:100%;background:#2ea7e0;"> <view class="wehx-top_input weui-flex"> &l

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 找到下载----选择稳定版本—选择windows64APPID ： 登录https://mp.weixin.qq.com(微信公众平台)----开发----开发者设置—找到id一栏复制 粘贴至APPID...

wxml部分代码如下：<view class="wehx-line-box"> <view class="weui-flex__item wehx-line-item" wx:for="{{axis}}" wx:key="*this"> <view class='line-name'>{{item.name}}</view> <...

<block wx:for="{{pictures}}" wx:for-item='item' wx:for-index='idx'> <image class="wehx_picture" src="{{item}}" data-index="{{idx}}" bindtap="previewImage"></image></block>j...

{ "description": "项目配置文件", //描述 "packOptions": { //用以配置打包时对符合指定规则的文件或文件夹进行忽略 "ignore": [] }, "setting": { //项目设置 "urlCheck": false, //不检查安全域名和 TLS 版本 "es6":...

在app.json文件中，pages数组中第一个页面就是默认启动页面，所以只需要将需要在开启页面后第一个展示的页面放在最前面即可，此方法适用于tabbar页面和其他子页面如下所示：{ "pages": [ "pages/show/message/message", "pages/containerlist/index", "pages/my/index", ...

目的：1.tab标题可以滑动切换，当屏幕左右滑动时标题也进行相应的切换2.点击tab标题选择按钮，可以选中相应的标题并展示相应的页面内容3.关于标题：a.tab标题总共8个，所以一屏无法全部显示b.tab内容区左右滑动切换时，tab标题随即做标记（active）c.当active的标题不在当前屏显示时，要使其能显示到当前屏中XML部分代码<view> <vi...

三木运算拼接{{item.driverName ? item.driverName + "-" +item.plateNo : "暂无"}}三木运算{{item.driver ? item.driver : "暂无"}}

添加自定义的模态框后，在上面的模态框上进行滑动时，底部的页面也会跟着滑动解决方法：在模态框上添加 catchtouchmove="true"<view class="weui-demo-dialog catchtouchmove="true">注意：此方法只在手机端起作用，在调试工具上无任何效果...

方法一：通过事件实现tab切换xml部分如下所示：<!-- tab切换 --><view class="wehx-top_tab weui-flex"> <view class="weui-flex__item {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="clickTab"&gt...