当前位置: 首页 > news >正文

结合ColorUI组件开发微信小程序

1.自定义组件生命周期函数:
Component({data: {},attached() {console.log("自定义组件生命周期函数 attached--先执行");this.getPos();},ready() {console.log("ready生命周期函数---在attached之后执行")},methods: {getPos() {var that = this;console.log("ssss")wx.getLocation({type: "wgs84",isHighAccuracy: true,success: function (res) {console.log('纬度' + res.latitude);console.log('经度' + res.longitude);that.setData({latitude: res.latitude,longitude: res.longitude,})}})}}
})

2.使用ColorUI定义的列表样式:
<view class="cu-list menu"><view class="cu-item"><view class="content"><text class="cuIcon-locationfill text-grey"></text><text class="text-black">地址</text><text class="text-grey text-xs detailPos">详细地址</text></view></view></view>

3.使用ColorUI定义的图标样式:
<text class="cuIcon-locationfill text-grey"></text>
4.可上下滚动的列表:
(1).wxml:
  <view class="posList"><scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"><view class="cu-list menu"><view class="cu-item" wx:for="{{itemsPos}}" wx:for-item="item" wx:key="index"><view class="content"><text class="cuIcon-locationfill text-grey"></text><text class="text-black">{{item.pos}}</text><text class="text-grey text-xs detailPos">{{item.detailPos}}</text></view></view></view></scroll-view></view>

(2).js文件:
  
scrollToTop() {this.setAction({scrollTop: 0})},upper(e) {// console.log(e)},lower(e) {// console.log(e)},scroll(e) {// console.log(e)},tap() {for (let i = 0; i < order.length; ++i) {if (order[i] === this.data.toView) {this.setData({toView: order[i + 1],scrollTop: (i + 1) * 200})break}}},tapMove() {this.setData({scrollTop: this.data.scrollTop + 10})},

(3).wsxx文件:
.posList {position: fixed;left: 0%;top: 16%;width: 100%;height: 90%;background-color: rgb(215, 253, 0);
}.scroll-view_H {white-space: nowrap;
}.scroll-view-item {height: 100%;
}.scroll-view-item_H {display: inline-block;width: 100%;height: 100%;
}

http://www.lryc.cn/news/257682.html

相关文章:

  • 如何搭建废品上门回收小程序
  • 蓝牙配对、连接和删除汇总
  • Linux网络——高级IO
  • Java注解详解
  • Android wifi 框架以及Enable流程
  • 十五、机器学习进阶知识:K-Means聚类算法
  • 软件崩溃时Visual Studio中看不到有效的调用堆栈,使用Windbg动态调试去分析定位
  • 搭乘“低代码”快车,引领食品行业数字化转型全新升级
  • Axure->Axure安装,Axure菜单栏和工具栏功能介绍,页面及概要区
  • 【BUG】微信小程序image不会随着url动态变化
  • 供应链管理痛点大解析!内附解决方案
  • 【Python深度学习第二版】学习笔记之——神经网络
  • 计算机视觉之手势、面部、姿势捕捉以Python Mediapipe为工具
  • 基于AWS Serverless的Glue服务进行ETL(提取、转换和加载)数据分析(一)——创建Glue
  • Vue学习计划-Vue2--VueCLi(二)vuecli脚手架创建的项目内部主要文件分析
  • spring boot项目如何自定义参数校验规则
  • springboot整合xxl-job,通过代码进行调度中心注册开启任务等
  • k8s集群部分使用gpu资源的pod出现UnexpectedAdmissionError问题
  • 自定义 el-select 和 el-input 样式
  • 解决本地centos虚拟机重启,自动变换 ip 地址的问题
  • pt36项目短信OAth2.0
  • 教师们如何一对一私发成绩?
  • 12.11
  • Spring JdbcTemplate
  • 力扣编程题算法初阶之双指针算法+代码分析
  • 实现安装“自由化”!在Windows 11中如何绕过“您尝试安装的应用程序未通过微软验证”
  • 【mysql】下一行减去上一行数据、自增序列场景应用
  • CLIP在Github上的使用教程
  • 入职字节外包一个月,我离职了。。。
  • SpringBoot的web开发