从上面两图可以看出来这个文本域差别也太大了，这效果要是说一样的话也太牵强了，于是调整了下margin、padding的，发现并没有什么用，而且这个textarea的间距在ios上大的有点离谱了，即使android和ios不要求一样，但是单一个ios上面的间距也是明显的大，难看，好，下面写下自己的解决办法，先上两张效果图 ：
下面写实现过程：
js文件:
Page({
data: {
detail:false,
},
onLoad: function (options) {
var phone = wx.getSystemInfoSync() //调用方法获取机型
var that = this
if (phone.platform == 'ios') {
that.setData({
detail: true
})
} else if (phone.platform == 'android') {
that.setData({
detail: false
})
}
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
}
})
wxml文件：
<view class='xingdongDescript'>
<view class='xingdongNameBox'><view>行动名称</view><input placeholder='请输入' /></view>
<view class='xingdongjieshaoBox'><view class='xingdongjieshao'>行动介绍</view><view class="{{detail ? 'iostextarea' : 'androidtextarea'}}"><textarea placeholder='请输入' /></view></view></view>
wxss文件：
.xingdongDescript{
background: white
padding: 0 0 0 30rpx
box-sizing: border-box
width: 100%
height: 285rpx
}
.xingdongNameBox{
width: 100%
height: 88rpx
overflow: hidden
padding: 0 20rpx 0 0
box-sizing: border-box
border-bottom: 1rpx solid #E5E5E5
}
.xingdongNameBox view{
width: 25%
height: 88rpx
line-height: 88rpx
float: left
color: #000000
font-size: 34rpx
}
.xingdongNameBox input{
width: 75%
height: 88rpx
line-height: normal
float: left
font-size: 34rpx
color: #000000
}
.xingdongjieshaoBox{
width: 100%
height: 197rpx
overflow: hidden
padding: 0 20rpx 0 0
box-sizing: border-box
position: relative
}
.xingdongjieshaoBox .xingdongjieshao{
width: 25%
height: 88rpx
line-height: 88rpx
float: left
color: #000000
font-size: 34rpx
position: absolute
top: 0
left: 0
}
.iostextarea{
position: absolute
left: 24.3%
top: 1rpx
margin-left: -11rpx
width: 73%
height: 197rpx
}
.iostextarea textarea{
position: absolute
width: 100%
height: 100%
font-size: 34rpx
}
.androidtextarea{
position: absolute
left: 24.3%
width: 73%
height: 197rpx
}
.androidtextarea textarea{
width: 100%
height: 197rpx
float: left
padding: 22rpx 0 0 0
box-sizing: border-box
font-size: 34rpx
}
至此，实现想要的效果。
<view>父组件msg的值:{{msg}}</view>
<Header msg="{{msg}}" bindchildChange="change" ></Header>
<block wx:for="{{list}}" wx:key="index">
<ListItem rItem="{{item}}" bindchildGO="childGO"></ListItem>
</block>
<Header msg="{{msg}}"></Header>
/* pages/list/list.wxss */
.item{
padding: 5px
}
img1{
width: 120px
height: 120px
border-radius: 5px
}
.row{
flex: 1
height: 120px
}
.title{
padding: 10px
}
.dec{
padding:0 10px
}
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:"你是我的小宝贝",
list:[{
url:"https://www.baidu.com",
imageUrl:"https://img1.baidu.com/it/u=2519912129,4264910682&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
title:"我的小可爱",
content:"可爱可爱"
},
{
imageUrl:"https://img1.baidu.com/it/u=931545919,4030748642&fm=253&fmt=auto&app=138&f=JPEG?w=306&h=459",
title:"我的小可爱",
content:"mao可爱可爱"
},]
},
change:function(str){
this.setData({
msg:str.detail
})
},
childGO(e){
wx.navigateTo({
url: '/pages/webpage/webpage?url='+e.detail,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
"usingComponents": {
"ListItem":"/components/ListItem/ListItem",
"Header":"/components/Header/Header"
}
<view class="flex item" bindtap="go" data-url="{{rItem.url}}">
<image class="img1" src="{{rItem.imageUrl}}"></image>
<view class="row">
<view class="title">{{rItem.title}}</view>
<view class="dec">{{rItem.content}}</view>
</view>
</view>
.img1{
width: 120px
height: 120px
display: block
border-radius: 5px
}
.item{
padding: 5px
}
.row{
flex: 1
height: 120px
}
.title{
padding: 10px
}
.dec{
padding: 0 10px
}
.flex{
display: flex
}
.flex-between{
justify-content: space-between
}
.flex-center{
justify-content: center
align-items: center
}
// components/ListItem/ListItem.js
Component({
/**
* 组件的属性列表
*/
properties: {
/* 子组件用properties来接收对象 */
rItem:{
/* 如果没有传入对象显示的默认值 */
type:Object,
value:{
imageUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-a7c5da54b8008049fe43089752c74ce2_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648446806&t=9f16e5a2c12d51ba32169795e4d339f7',
title:'我的小可爱',
content:'我的小可爱我的小可爱我的小可爱我的小可爱'}
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
go(e){
console.log(e)
let url = e.currentTarget.dataset.url
this.triggerEvent('childGO',url)
}
}
})
<view class="t" bindtap="handler" >{{msg}}</view>
.t{
font-size: 25px
padding: 10px
text-align: center
}
// components/Header/Header.js
Component({
/**
* 组件的属性列表
*/
properties: {
msg:{
type:String,
value:'我是Header'
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handler:function(){
/* 直接改子组件里的msg父组件不会同步所以不能直接改 */
/* this.setData({
msg:'你好'
}) */
this.triggerEvent('childChange','你可真坏啊')
},
}
})
<button bindtap="getuserInfo" plain type="primary">获取用户信息</button>
<image src="{{touxiang}}" class="t"></image>
<view>{{nicheng}}</view>
<!-- 想要已进入页面就显示头像和昵称使用 open-type 标签 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 使用语言 -->
<open-data type="userLanguage"></open-data>
data: {
msg: 'csgo',
touxiang: "",
nicheng: ""
},
getuserInfo() {
wx.getUserProfile({
desc: '亲爱的宝贝', // 声明获取用户个人信息后的用途，后续会展示在d窗中，请谨慎填写
success: (res) => {
console.log(res)
let {
userInfo: {
avatarUrl,
nickName
}
} = res
this.setData({
nicheng: nickName,
touxiang: avatarUrl
})
}
})
},
可以设置个padding-bottom: 450rpx
就可以避免这个问题，然后通过焦点或者键盘状态动态来控制这个padding，键盘拉起就是450rpx,键盘隐藏再设置成0,或者直接450rpx就行。
微信小程序
微信小程序，简称小程序，缩写xcx，英文mini program。是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。
应用将无处不在，随时可用，但又无需安装卸载。
微信小程序于2017年1月9日凌晨正式上线。张小龙随后在朋友圈发出一条写着“2017.1.9”的状态，同时配有 iPhone 一代的新品发布图。张小龙以这样的形式，向乔布斯致敬。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）