1、首先打开微信开发者工具,新建一个小程序。
2、page目录下新建一个test目录和相关页面文件。打开app.json文件,将test页面路径放置到index前面。
3、单个view居中:点击打开test.wxml页面代码,输入图中的代码内容。给view设置一个class。
4、点击打开test.wxss文件,这里设置元素样式。输入下面图中的样式代码,可以实现view中文字内容居中。
5、最后打开test.wxss文件,设置viewin的样式代码,如图中所示。实现内部的view相对于外层的view居中显示。
在微信小程序内设置文字在view标签垂直居中的办法:<view class="father">我是儿子</view>.father{line-height:82rpxwidth:100%}
微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想。
用户扫一扫或搜一下即可打开应用。
拓展内容:2016年1月11日,微信之父张小龙时隔多年的公开亮相,解读了微信的四大价值观。张小龙指出,越来越多产品通过公众号来做,因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务,所以微信内部正在研究新的形态,叫「微信小程序」。
2016年9月21日,微信小程序正式开启内测。在微信生态下,触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案,提供小程序在云端服务器的技术方案。
2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线,用户可以体验到各种各样小程序提供的服务。
微信小程序 ,列表头滚动的过程中 ,view 悬浮在顶部 ,如何实现这样的一个效果呢??
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
testData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
testData2: [1, 2, 3, 4, 5, 10],
//是否显示 悬停布局
isshow:false,
//悬浮布局的数据
toptexxt:""
},
onLoad: function () {
},
/**
* 页面加载完成
*/
onReady: function () {
},
/**
* 页面滚动监听
*/
onPageScroll: function (e) {
//console.log(e)
let that = this
let query = wx.createSelectorQuery()
query.selectAll(".section-cell").boundingClientRect(function (res) {
console.log(res)
let size =res.length
let position = -1
let topshow = -1000//根据需求设置大小
let i=0
//根据 top 的 大小 获取 当前距离顶部最近的view 的下标, 负数最大值 或者是0,
for(i=0i<sizei++){0
let top = res[i].top
if(top<=0 &&top>topshow ){
topshow = top
position=i
}
}
console.log("当前坐标是 position = "+position)
let isshow =false
if (res[0].top<0){
if(position==-1) position=0
isshow = true
}
that.setData({
isshow: isshow,
toptexxt: isshow?that.data.testData[position]:""
})
}).exec()
},
})
<!--index.wxml-->
<view>
<view class='header'>这里是header</view>
<view hidden='{{!isshow}}'>
<view class= "section-header section-fixed" >这是section-header {{toptexxt}}</view>
</view>
<view wx:for="{{testData}}" wx:key="{{testData}}">
<view>
<view class='section-cell' id='top{{item}}'>{{item}} </view>
<view wx:for="{{testData2}}" wx:key="{{testData2}}">
<view class='section-cell2' id='child{{item}}'>{{item}}</view>
</view>
</view>
</view>
</view>
/**index.wxss**/
.section-placeholder {
background-color: white
}
.section-fixed {
position: fixed
top: 0
}
.header {
height: 300rpx
width: 750rpx
background-color: bisque
}
.section-header {
height: 80rpx
width: 750rpx
background-color: rebeccapurple
}
.section-cell {
width: 750rpx
height:80rpx
background-color: gold
margin-top: 2rpx
}
.section-cell2 {
height: 50rpx
width: 750rpx
background-color: darkred
}
图片效果
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)