目前,不少在線教育平臺中,爲了驗證課堂的教學效果或學員學習狀況,通常都內置了做業系統。學員在上傳做業的過程當中,有可能會上傳多張圖片並按序(自下而上)排列,那麼這個功能是如何實現的呢?下面小編就以iOS版本的在線教育平臺開發爲例,來講明下,如何使用WKWebView來實現圖片排列。
1、先建立一個wkwebviewcss
- (WKWebView *)wkWebV{ if (!_wkWebV) { _wkWebV = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, _window_width, _window_height)]; } return _wkWebV; }
2、建立一個獲取圖片數組html
- (void)getImageData{ //圖片連接數組,這裏隨便找了幾張圖片 NSArray *array = @[@「https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1688444226,912774195&fm=26&gp=0.jpg",@"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597380686451&di=9c0c95578967f990f80df47815f75403&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20161212%2F20161212144027_cded4c83f17c47604eb2be0530bb43ba_7.jpeg"]; NSString *htmlStr = @「"; //遍歷圖片數組,添加img標籤 for (NSString *str in array) { NSString *ssss = [NSString stringWithFormat:@"<img src='%@'></img>",str]; htmlStr = [NSString stringWithFormat:@"%@%@",htmlStr,ssss]; } //設置CSS NSString * htmlStyle = @" <style type=\"text/css\"> *{min-width: 100% !important;max-width: 100% !important;} img{ height: auto !important;} </style> 「; //把CSS和img標籤拼接 htmlStr = [htmlStyle stringByAppendingString:htmlStr]; //使用WKWebview加載HTMLSting [_wkWebV loadHTMLString:htmlStr baseURL:nil]; }
以上就是在線教育平臺開發中,如何使用WKWebView來實現做業功能中的圖片排列效果。web